Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreExtending the FastStore API
Best practices for using API extensions
The @faststore/core package version 3.x introduces enhancements to API extension with a more efficient GraphQL query handling and security measures enhancements.
In this guide, learn to configure API extensions, ensuring the following:
  • Use the gql helper usage for smoother and more efficient GraphQL query handling.
  • Implement a more secure method for invoking queries and mutations to safeguard your store's data.
  • Optimize call processes for queries or mutations defined within @faststore/core.

Before you begin

Make sure your store version is updated to v3.0.0 or above. If it’s not updated, refer to the Updating your @fastore/core package version section.

Updating the gql helper usage

The gql helper serves as a function to define GraphQL operations such as queries, mutations, or fragments within the store code. See the example below:
/fragments/ClientProduct.tsx

_16
import { gql } from '@faststore/graphql-utils'
_16
_16
export const fragment = gql`
_16
fragment ClientProduct on Query {
_16
product(locator: $locator) {
_16
id: productID
_16
breadcrumbList {
_16
itemListElement {
_16
item
_16
name
_16
position
_16
}
_16
}
_16
}
_16
}
_16
`

Import the gql helper from @faststore/core/apiand call it as a function - with the argument between parenthesis. This also applies to query and mutation definitions inside the components. For example:
fragments/ClientProduct.tsx

_16
import { gql } from '@faststore/core/api'
_16
_16
export const fragment = gql(`
_16
fragment ClientProduct on Query {
_16
product(locator: $locator) {
_16
id: productID
_16
breadcrumbList {
_16
itemListElement {
_16
item
_16
name
_16
position
_16
}
_16
}
_16
}
_16
}
_16
`)

Using useQuery hook to call queries and mutations

Queries, and mutations are must be invoked using secure hashes, which are randomly generated. To that, pass the query or mutation object - the result of the gql call - to useQuery directly. For example:

_17
import { gql } from '@faststore/core/api'
_17
import { useQuery_unstable as useQuery } from '@faststore/core/experimental'
_17
_17
const query = gql(`
_17
query MyCustomQuery {
_17
customQuery() {
_17
data
_17
}
_17
}
_17
`)
_17
_17
// useQuery apropriately calls MyCustomQuery
_17
function CustomComponent() {
_17
// ...
_17
const result = useQuery(query, variables)
_17
// ...
_17
}

Calling queries or mutations defined by @faststore/core

A custom component can call a query or mutation defined by @faststore/core, such as ClientManyProductsQuery. In these cases, replace the useQuery hook call with a call to the specific hook for that query.

_10
import { useClientManyProducts_unstable as useClientManyProducts } from '@faststore/core/experimental'
_10
_10
// ClientManyProductsQuery will be called with the variables passed by CustomComponent
_10
function CustomComponent() {
_10
// ...
_10
const result = useClientManyProducts(variables)
_10
// ...
_10
}

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page