Skip to content

docs(theme): update custom queries documentation to be more friendly … #418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 14, 2022
Merged

docs(theme): update custom queries documentation to be more friendly … #418

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 59 additions & 31 deletions docs/guide/override-queries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,51 +4,79 @@ To override one or multiple queries without creating a custom composable for eac

## Examples

### Overriding query
In this example we will override `products` query by adding `image` field and one `custom_attribute`.

---
Because queries can be long so it will be best to keep all custom queries in a dedicated directory.
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:
```typescript
import gql from 'graphql-tag';

export default gql`
query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
aggregations {
attribute_code
label
options {
label
value
count
}
}
items {
...
image {
url
position
disabled
label
}
custom_attribute
...
}
page_info {
current_page
page_size
total_pages
}
total_count
}
}
`;

```

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:

```js
import customProductsQuery from './customQueries/productList';

const config = require('./config.js');
const cookieNames = require('./enums/cookieNameEnum');
import gql from 'graphql-tag';

module.exports = {
integrations: {
magento: {
customQueries: {
/**********************
** HERE : use the default query key to override it.
***********************/
'products': ({ query, variables, metadata }) => {
query = gql`
...
`;
return { query, variables }
}
},
location: '@vue-storefront/magento-api/server',
configuration: {
api: config.get('magentoGraphQl'),
cookies: {
...cookieNames,
},
defaultStore: 'default',
externalCheckout: {
enable: config.get('enableMagentoExternalCheckout'),
cmsUrl: config.get('externalCheckoutUrl'),
syncUrlPath: config.get('externalCheckoutSyncPath'),
stores: {
default: config.get('enableMagentoExternalCheckout'),
},
},
facets: {
available: ['color', 'size', 'price'],
},
customApolloHttpLinkOptions: {
useGETForQueries: false,
/** ********************
** HERE : use the default query key to override it.
********************** */
products: ({ query, variables }) => {
return { query: customProductsQuery, variables }; // Your custom query
},
},
...
},
},
};


```

**Important**

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.