You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/guide/override-queries.md
+75-62Lines changed: 75 additions & 62 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,80 +4,93 @@ To override one or multiple queries without creating a custom composable for eac
4
4
5
5
## Examples
6
6
7
+
Below is the example on how to override the default query for `productList`.
8
+
7
9
### Overriding query
8
-
In this example we will override `products` query by adding `image` field and one `custom_attribute`.
10
+
11
+
In this example we will override `products` query by adding `cld_data` field that will retrieve Cloudinary image data from Magento.
12
+
13
+
::: warning
14
+
In order to query `cld_data`, you need to have [Cloudinary Magento extension](https://cloudinary.com/documentation/magento_integration) installed in your Magento project.
15
+
:::
9
16
10
17
---
11
-
Because queries can be long so it will be best to keep all custom queries in a dedicated directory.
12
-
Inside the theme's root create `customQueries` directory, then copy `productList.ts` file from api-client lib into the created directory. Now you can easily modify the query inside your custom queries catalog. As we wanted to add `image` and `custom_attribute`file after the modification will look like the following example:
13
-
```typescript
14
-
importgqlfrom'graphql-tag';
15
-
16
-
exportdefaultgql`
17
-
query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
1. Inside the theme's root let's create a `customQueries` directory, and [copy the content of the default `productsList` query from `vuestorefront/magento2/packages/api-client/src/api/products/productsList.ts` file](https://github.com/vuestorefront/magento2/blob/main/packages/api-client/src/api/products/productsList.ts) into the newly created directory.
20
+
21
+
You can modify the query inside this file by adding `cld_data` with fields to the existing query as below:
22
+
23
+
```typescript
24
+
importgqlfrom'graphql-tag';
25
+
26
+
exportdefaultgql`
27
+
query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
Once you prepared custom query you must register it so the application will know where it is and how to use it. Inside the theme's `middleware.config.js`, under `integrations.magento` add `customQueries` field. Import your custom query and configure it as in the following example:
3. Add a new property field `customQueries` under `integrations.magento` with the following code:
69
+
70
+
```js
71
+
module.exports= {
72
+
integrations: {
73
+
magento: {
74
+
customQueries: {
75
+
/* This is where we override the default query */
76
+
products: (context) => ({
77
+
...context,
78
+
query: customProductsQuery, // Your custom query
79
+
})
80
+
},
81
+
//...
68
82
},
69
83
},
70
-
...
71
-
},
72
-
},
73
-
};
84
+
};
74
85
75
-
### Important notes
76
-
77
-
**Only** attributes presented on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side.
86
+
4. Now you can restart your dev environment and view the updated data queried.
78
87
79
-
**Important**
88
+
::: warning
89
+
`thumbnail` is a must-have field to query. It is used for our default image rendering (for Nuxt image). DONOT remove it from the query in any circumstance.
90
+
:::
80
91
81
-
Keep in mind that only attributes present on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side. To be able to get any custom attributes you must extend GraphQL schema in the Magento2. Follow [Magento 2 documentation](https://devdocs.magento.com/guides/v2.4/graphql/develop/extend-existing-schema.html) to achieve that.
92
+
### Important notes
82
93
94
+
**Only** attributes presented on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side.
83
95
96
+
To be able to get any custom attributes you must extend GraphQL schema in the Magento2. Follow [Magento 2 documentation](https://devdocs.magento.com/guides/v2.4/graphql/develop/extend-existing-schema.html) to achieve that.
0 commit comments