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
gqlhelper 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: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: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:
_17import { gql } from '@faststore/core/api'_17import { useQuery_unstable as useQuery } from '@faststore/core/experimental'_17_17const query = gql(`_17query MyCustomQuery {_17 customQuery() {_17 data_17 }_17}_17`)_17_17// useQuery apropriately calls MyCustomQuery_17function 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.
_10import { useClientManyProducts_unstable as useClientManyProducts } from '@faststore/core/experimental'_10_10// ClientManyProductsQuery will be called with the variables passed by CustomComponent_10function CustomComponent() {_10 // ..._10 const result = useClientManyProducts(variables)_10 // ..._10}