diff --git a/docs/faststore/docs/api-extensions/consuming-api-extensions.mdx b/docs/faststore/docs/api-extensions/consuming-api-extensions.mdx index dd7877323f..8c0dd29032 100644 --- a/docs/faststore/docs/api-extensions/consuming-api-extensions.mdx +++ b/docs/faststore/docs/api-extensions/consuming-api-extensions.mdx @@ -1,126 +1,137 @@ --- title: "Consuming FastStore API extension with custom components" -slug: consuming-api-extensions --- -In this guide, learn how to consume new fields from [custom sections](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) and [overridable components](https://developers.vtex.com/docs/guides/faststore/building-sections-overriding-components-and-props). +In this guide, learn how to consume new fields from [custom sections](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) and [overridable components](https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions). -FastStore exposes the data that comes from FastStore API along with FastStore API Extensions inside a provider. -This data comes as a `context` in the provider and you can use the following hooks to access it: +FastStore extends its capabilities through API Extensions, which provide additional data for customization. This guide focuses on using different hooks to access and manipulate data based on the page type or section you are working with. + +## Hooks for consuming API extension data + +FastStore exposes the data from both the FastStore API and FastStore API Extensions within a provider. +The data is provided as a `context` within the provider, and specific hooks are available for different scenarios:
`usePDP()`: Use this hook when integrating your section with a Product Detail Page (PDP). -```ts -import { usePDP } from "@faststore/core" - -const context = usePDP() -``` + ```ts copy + import { usePDP } from "@faststore/core" + const context = usePDP() + ```
`usePLP()`: Use this hook when integrating your section with a Product Listing Page (PLP). -```ts -import { usePLP } from "@faststore/core" + ```ts + import { usePLP } from "@faststore/core" -const context = usePLP() -``` + const context = usePLP() + ```
`useSearchPage()`: Use this hook when integrating your section on the Search Page. -```ts -import { useSearchPage } from "@faststore/core" + ```ts + import { useSearchPage } from "@faststore/core" -const context = useSearchPage() -``` + const context = useSearchPage() + ```
-`usePage()`: Use this hook when you have a single section that is used in more than one type of page. +`usePage()`: Use this hook when a single section is used in more than one page type. -```ts -import { usePage } from "@faststore/core" + ```ts + import { usePage } from "@faststore/core" -const context = usePage() -``` + const context = usePage() + ``` -This hook returns one of the following types as context: `PDPContext`, `PLPContext`, or `SearchPageContext`, and you can decide how to handle it depending on the page that will use this hook by passing the types as generics. +This hook returns one of the following context types: `PDPContext`, `PLPContext`, or `SearchPageContext`. You can decide how to handle it depending on the page using this hook by passing these types as generics. -```ts -import { usePage } from "@faststore/core" + ```ts + import { usePage } from "@faststore/core" -const context = usePage() -``` + const context = usePage() + ```
-Also, you can use type assertion functions so that you can leverage the use of typescript and get the correct types +Also, you can use type assertion functions to leverage Typescript and get the correct types. -```ts -import { isPDP, isPLP, isSearchPage } from "@faststore/core"; + ```ts + import { isPDP, isPLP, isSearchPage } from "@faststore/core"; -const context = usePage() + const context = usePage() -isPDP(context) -isPLP(context) -isSearchPage(context) -``` + isPDP(context) + isPLP(context) + isSearchPage(context) + ``` ## Consuming API Extensions data from custom sections -To illustrate how to consume API extension data from custom sections, we'll use the **Call To Action** example from the [Creating a new section](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) guide inside a Product Listing Page (PLP). -So, ensure to have followed this guide mentioned before to have a new section. +To illustrate how to consume API extension data from custom sections, let's consider a practical example using the **Call To Action** section within a PLP. Make sure you have followed the steps described in the [Creating a new section](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) guide. -Once you have the `CallToAction` section, add the following import statement inside `src/components/CallToAction.tsx`: +1. Create a new section as explained in the [Creating a new section](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) guide. +2. Import the `usePLP` hook in the component file (`src/components/CallToAction.tsx`) to access data related to PLPs: -```ts src/components/CallToAction.tsx mark=1,12 -import { usePLP } from "@faststore/core"; + ```ts src/components/CallToAction.tsx + import { usePLP } from "@faststore/core"; + ``` -export interface CallToActionProps { - title: string - link: { - text: string - url: string +3. Inside the component, call the `usePLP` hook to get the context data related to Product Listing Pages. The result is stored in the `context` variable. + + ```tsx + export interface CallToActionProps { + title: string + link: { + text: string + url: string + } } -} -export default function CallToAction(props: CallToActionProps) { - const context = usePLP() - return ( -
-

{`${props.title} ${context?.data?.namedExtraData?.data}`}

-
- ) -} -``` + export default function CallToAction(props: CallToActionProps) { + const context = usePLP() + return ( +
+

{`${props.title} ${context?.data?.namedExtraData?.data}`}

+
+ ) + ``` +Now, you can use the data from `context` as needed. In the provided example, the component returns a `
` element containing an `

` element, which combines the `title` prop from the component's props with the data extracted from the context. The optional chaining ensures safe navigation through properties that may be undefined or null. Feel free to customize this approach to suit your needs and leverage the retrieved data for your desired functionality. ## Consuming API Extensions data from custom components in section overrides -After [overriding native components and props](https://developers.vtex.com/docs/guides/faststore/building-sections-overriding-components-and-props#overriding-a-native-component), you can also use the hooks inside custom components to consume custom data, just as in [custom sections](https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions#consuming-api-extensions-data-from-custom-sections). +After [overriding native components and props](https://developers.vtex.com/docs/guides/faststore/building-sections-overriding-components-and-props#overriding-a-native-component), you can extend your customization by using hooks within custom components to consume custom data, similar to [custom sections](https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions#consuming-api-extensions-data-from-custom-sections). In the following example, the `CustomBuyButton` component overrides the native `BuyButton` component from the `ProductDetails` section inside the Product Details Page (PDP). -```ts src/components/CustomBuyButton.tsx mark=2,5 -import { Button as UIButton } from '@faststore/ui' -import { usePDP } from "@faststore/core" - -export function CustomBuyButton(props) { - const context = usePDP() +1. Open the component file and import the `usePDP` hook from `@faststore/core`. +2. Use the `usePDP` hook to obtain the context specific to the PDP, which contains relevant information about the product displayed on the page. + + ```ts src/components/CustomBuyButton.tsx mark=2,5 + import { Button as UIButton } from '@faststore/ui' + import { usePDP } from "@faststore/core" + + export function CustomBuyButton(props) { + const context = usePDP() + + return ( + { + alert('Hello User!') + }} + > + {context?.data?.product.customData} + + ) + } - return ( - { - alert('Hello User!') - }} - > - {context?.data?.product.customData} - - ) -} -``` + ``` +In this scenario, the `CustomBuyButton` component leverages the `usePDP` hook to access the PDP-specific context. It seamlessly integrates with the `UIButton` component from the FastStore UI library, overriding the default behavior of the native `BuyButton` within the `ProductDetails` section. The content displayed within the button, dynamically retrieves and displays custom data associated with the product from the PDP context. The optional chaining ensures safe navigation through properties that may be undefined or null. diff --git a/docs/faststore/docs/api-extensions/extending-queries-using-fragments.mdx b/docs/faststore/docs/api-extensions/extending-queries-using-fragments.mdx index bf42c93ffb..727b3f93e4 100644 --- a/docs/faststore/docs/api-extensions/extending-queries-using-fragments.mdx +++ b/docs/faststore/docs/api-extensions/extending-queries-using-fragments.mdx @@ -1,23 +1,21 @@ --- title: "Extending queries using fragments" -slug: extending-queries-using-fragments --- -After [defining the new fields exposed by the FastStore API Extension](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-api-schema), the next step is to specify where these fields will be utilized within GraphQL fragments. +After [defining the new fields exposed by the FastStore API Extension](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-api-schema), the next step is to specify where these fields will be used within GraphQL fragments. -[Fragments](https://graphql.org/learn/queries/#fragments) in GraphQL are reusable units that enhance query functionality. FastStore associates these fragments with the existing queries used on its pages to incorporate the newly exposed fields. +[Fragments](https://graphql.org/learn/queries/#fragments) in GraphQL are reusable units that enhance query functionality. FastStore associates these fragments with the existing queries on its pages to incorporate the newly exposed fields. -> ℹ️ To access the list of queries and their corresponding fragments, refer to the [extendable queries](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments#extendable-queries) section. +> ℹ️ To access the list of queries and their corresponding fragments, check the [extendable queries](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments) section. -follow the steps below to add custom fields to an [existing query](https://developers.vtex.com/docs/guides/faststore/api-extensions-overview#extendable-queries). We will use the `ServerProduct` query as an example to illustrate how to extend. +Follow the steps below to add custom fields to an [existing query](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments#extendable-queries). We will use the `ServerProduct` query as an example to illustrate how to extend it. --- - ## Before you begin ### Avoid over-fetching data on pages - -Even though you can add information to the FastStore API schema, you must be careful not to over-fetch data on your pages. See the [best practices for fetching data on your storefront](https://v1.faststore.dev/how-to-guides/faststore-api/fetching-api-data#best-practices-for-fetching-data). + +Even though you can add information to the FastStore API schema, you must be careful not to over-fetch data on your pages. See the [best practices for fetching data on your storefront](https://developers.vtex.com/docs/guides/faststore/api-extensions-overview#best-practices-for-fetching-data). --- @@ -25,25 +23,25 @@ Even though you can add information to the FastStore API schema, you must be car ### Step 1: Create a new file -1. In the `src` folder of your store code, create the `fragments` folder. +1. In the `src` folder of your store code, create a `fragments` folder. ```bash mkdir fragments - ``` +``` -2. In the `fragments` folder, create the file named `ServerProduct.ts`. +2. In the `fragments` folder, create a file named `ServerProduct.ts`. ```bash touch ServerProduct.ts ``` - - > ⚠️ The name of the file should match the name of the query you want to extend without the Query suffix. In our example we're extending the `ServerProductQuery`, so the fragment file must be `ServerProduct.ts`. + +> ⚠️ The file name should match the name of the query you want to extend. ### Step 2: Define the GraphQL fragment -In the `ServerProduct.ts` file, define the GraphQL fragment corresponding to the new fields you want. In this example, the new field is represented by `customData` property to retrieve. Use the following syntax as a guideline: +In the `ServerProduct.ts` file, define the GraphQL fragment corresponding to the new fields you want to retrieve. In this example, the `customData` property represents the new field. Use the following syntax as a guideline: - ```ts src/fragments/ServerProduct.ts +```ts src/fragments/ServerProduct.ts import { gql } from '@faststore/core/api' @@ -54,49 +52,33 @@ export const fragment = gql(` } } `) -``` -Now, you can consume `customData` by following the [Consuming FastStore API extension with custom components](https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions) guide. +``` +Now, you can consume `customData` by following the [Consuming FastStore API extension with custom components](https://developers.vtex.com/docs/guides/faststore/api-extensions/consuming-api-extensions) guide. -## Extendable Queries +## Extendable queries Extendable queries in FastStore's GraphQL API are predefined queries that form the basis for fetching data from the API. - These queries enable customization by allowing the addition or modification of fields to align data retrieval with your store-specific requirements. + +### `ClientProductGalleryQuery` + +| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ClientProductGallery` | `Client` | `search` | PLP | In the hook `useProductGalleryQuery()` from the `ProductListingPage` (`PLP`) and `Search` Pages. | Products totalCount from [StorePageInfo](https://developers.vtex.com/docs/guides/faststore/schema-objects#storepageinfo), and facets ([StoreFacet](https://developers.vtex.com/docs/guides/faststore/schema-objects#storefacetboolean)) from [StoreSearchResult](https://developers.vtex.com/docs/guides/faststore/schema-objects#storesearchresult). | Frontend data from the `useSearch()` and `useLocalizedVariables()` hooks, the latter uses `useSession()`. | +
-Query: `ClientProductGalleryQuery` - - - - - - - - - -
ClientProductGalleryClientsearchPLP - In the hook `useProductGalleryQuery()` from the `ProductListingPage` (`PLP`) and `Search` Pages. - - Products totalCount from [StorePageInfo](https://v1.faststore.dev/reference/api/objects#storepageinfo), and facets ([StoreFacet](https://v1.faststore.dev/reference/api/objects#storefacet)) from - [StoreSearchResult](https://v1.faststore.dev/reference/api/objects#storesearchresult). - - Frontend data from the `useSearch()` and `useLocalizedVariables()` - hooks, the latter uses `useSession()`. -
- -### How to consume it +Consuming the query Use the `usePage()` hook when you have a single section that is used in more than one type of page. - ```ts import { usePage } from "@faststore/core" const context = usePage() ``` - This hook returns one of the following types as context: `PDPContext`, `PLPContext`, or `SearchPageContext`, and you can decide how to handle it depending on the page that will use this hook by passing the types as generics. - + ```ts import { usePage } from "@faststore/core" @@ -105,25 +87,16 @@ const context = usePage()
+### `ServerCollectionPageQuery` + +| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ServerCollectionPage` | `Server` | `collection` | PLP | In the function `getStaticProps()` from `PLP`. | `seo`, `breadcrumbList` and `metaData` from the collection ([StoreCollection](https://developers.vtex.com/docs/guides/faststore/schema-objects#storecollection)). | Collection `slug` that comes from URL. | +
-Query: `ServerCollectionPageQuery` - - - - - - - - - -
ServerCollectionPageServercollectionPLPIn the function `getStaticProps()` from `PLP`. - seo, breadcrumbList and meta data from the collection ([StoreCollection](https://v1.faststore.dev/reference/api/objects#storecollection)). - Collection `slug` that comes from URL.
- -### How to consume it +Consuming the query Use the `usePLP()` hook when integrating your section with a Product Listing Page (PLP). - ```ts import { usePLP } from "@faststore/core" @@ -132,20 +105,14 @@ const context = usePLP()
-
-Query: `ServerProductQuery` +### `ServerProductQuery` - - - - - - - - -
ServerProductServerproductPDPIn the function `getStaticProps()` from `PDP`.General product data from [StoreProduct](https://v1.faststore.dev/reference/api/objects#storeproduct).The `locator` with `slug` key/value.
+| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ServerProduct` | `Server` | `product` | PDP | In the function `getStaticProps()` from `PDP`. | General product data from [StoreProduct](https://developers.vtex.com/docs/guides/faststore/schema-objects#storeproduct). | The `locator` with `slug` key/value. | -### How to consume it +
+Consuming the query `usePDP()`: Use this hook when integrating your section with a Product Detail Page (PDP). @@ -157,78 +124,45 @@ const context = usePDP()
+### `ClientProductQuery` + +| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ClientProduct` | `Client` | `product` | PDP | In the hook `useProductQuery()` from `PDP`. | General product data from [StoreProduct](https://developers.vtex.com/docs/guides/faststore/schema-objects#storeproduct) to update product data inside `PDP` (product coming from `ServerProductQuery` as fallback). | Frontend data from the `useSession()` hook in the locator array with `id`, `channel`, `locale` as key/values. | +
-Query: `ClientProductQuery` - - - - - - - - - -
ClientProductClientproductPDPIn the hook `useProductQuery()` from `PDP`. - General product data from [StoreProduct](https://v1.faststore.dev/reference/api/objects#storeproduct) to update product data inside - `PDP` (product coming from `ServerProductQuery` as fallback). - - Frontend data from the `useSession()` hook in the locator array with - `id`, `channel`, `locale` as key/values. -
- -### How to consume it +Consuming the query `usePDP()`: Use this hook when integrating your section with a Product Detail Page (PDP). - ```ts - import { usePDP } from "@faststore/core" +```ts +import { usePDP } from "@faststore/core" - const context = usePDP() +const context = usePDP() ```
-
-Query: `ClientManyProductsQuery` - - - - - - - - - -
ClientManyProductsClientsearch - `PLP`, `Search Page`, and pages that use `ProductShelf`, and `ProductTiles` components. - - - In the hook `usePageProductsQuery()` from `PLP` and `Search Page`. - - - In the hook `useProductsPrefetch()` to prefetch the previous (prev) - and next (next) page from the current `PLP` or `Search Page`. - - - In the hook `useProductsQuery()`, in `ProductShelf`, `ProductTiles` - components, that can be used on multiple pages. +> ⚠️ When using both [`ServerProductQuery`](#serverproductquery) and ClientProductQuery on the PDP, remember that `ServerProductQuery` fetches the initial product data from the server, while `ClientProductQuery` updates that data based on user actions. Make sure to manage how these queries interact to ensure data accuracy. When developing API extensions, prioritize keeping the data consistent and using both queries appropriately to provide users with the most up-to-date information. - - General products data ([StoreProduct](https://v1.faststore.dev/reference/api/objects#storeproduct)) with the `totalCount` from [StorePageInfo](https://v1.faststore.dev/reference/api/objects#storepageinfo). - - Frontend data from the `useLocalizedVariables()` and `useSession()` hooks. -
+### `ClientManyProductsQuery` -### How to consume it +| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ClientManyProducts` | `Client` | `search` | `PLP`, `Search Page`, and pages that use `ProductShelf`, and `ProductTiles` components. |
  1. In the hook `usePageProductsQuery()` from `PLP` and `Search Page`.
  2. In the hook `useProductsPrefetch()` to prefetch the previous (prev) and next (next) page from the current `PLP` or `Search Page`.
  3. In the hook `useProductsQuery()`, in `ProductShelf`, `ProductTiles` components, that can be used on multiple pages.
| General products data ([StoreProduct](https://developers.vtex.com/docs/guides/faststore/schema-objects#storeproduct)) with the `totalCount` from [StorePageInfo](https://developers.vtex.com/docs/guides/faststore/schema-objects#storepageinfo). | Frontend data from the `useLocalizedVariables()` and `useSession()` hooks. | -Use the `usePage()` hook when you have a single section that is used in more than one type of page. +
+Consuming the query +Use the `usePage()` hook when you have a single section that is used in more than one type of page. ```ts import { usePage } from "@faststore/core" const context = usePage() ``` - This hook returns one of the following types as context: `PDPContext`, `PLPContext`, or `SearchPageContext`, and you can decide how to handle it depending on the page that will use this hook by passing the types as generics. - - ```ts + +```ts import { usePage } from "@faststore/core" const context = usePage() @@ -236,60 +170,41 @@ const context = usePage()
+### `ClientShippingSimulationQuery` + +| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ClientShippingSimulation` | `Client` | `shipping` | PDP | In the `ShippingSimulation` component. | General shipping simulation data with the `address` and `logisticsInfo`. | Frontend `country`, and `postalCode` from `useSession()` hook, and the `items` Array of `IShippingItem` (`id`, `quantity`, and `seller`). | +
-Query: `ClientShippingSimulationQuery` - - - - - - - - - -
ClientShippingSimulationClientshippingPDPIn the `ShippingSimulation` component. - General shipping simulation data with the `address` and `logisticsInfo`. - - Frontend `country`, and `postalCode` from `useSession()` hook, and the `items` Array of `IShippingItem` (`id`, `quantity`, and `seller`). -
- -### How to consume it - - You can use the experimental `useShippingSimulation_unstable()` hook, or the `getShippingSimulation_unstable()` function to retrieve shipping data in Overridable (custom) components. +Consuming the query + +You can use the experimental `useShippingSimulation_unstable()` hook, or the `getShippingSimulation_unstable()` function to retrieve shipping data in Overridable (custom) components. +
-
-Query: `ClientSearchSuggestionsQuery` +### `ClientSearchSuggestionsQuery` - - - - - - - - -
ClientSearchSuggestionsClientsearch`SearchInput` component from `GlobalSection`.In the `SearchInput` component.General search data with the `suggestions` and `products`.Frontend data from `useSession()` hook, and the `term` searched.
+| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ClientSearchSuggestions` | `Client` | `search` | `SearchInput` component from `GlobalSection`. | In the `SearchInput` component. | General search data with the `suggestions` and `products`. | Frontend data from `useSession()` hook, and the `term` searched. | -### How to consume it +
+Consuming the query You can use the experimental `useSuggestions_unstable()` hook to retrieve the search suggestions data in Overridable (custom) components. +
-
-Query: `ClientTopSearchSuggestionsQuery` +### `ClientTopSearchSuggestionsQuery` - - - - - - - - -
ClientTopSearchSuggestionsClientsearch`SearchInput` component from `GlobalSection`.In the `SearchInput` component.The top searched suggestions.Frontend data from `useSession()` hook.
+| **Fragment** | **Side** | **Query operation** | **Page** | **Usage** | **Return** | Parameters | +| ------------ | -------- | ------------------- | -------- | --------- | ---------- | ---------- | +| `ClientTopSearchSuggestions` | `Client` | `search` | `SearchInput` component from `GlobalSection`. | In the `SearchInput` component. | The top searched suggestions. | Frontend data from `useSession()` hook. | -### How to consume it +
+Consuming the query You can use the experimental `useTopSearch_unstable()` hook to retrieve the top search suggestions data in Overridable (custom) components. +
diff --git a/docs/faststore/docs/customization/api-extensions/overview.mdx b/docs/faststore/docs/api-extensions/overview.mdx similarity index 100% rename from docs/faststore/docs/customization/api-extensions/overview.mdx rename to docs/faststore/docs/api-extensions/overview.mdx diff --git a/docs/faststore/docs/api-extensions/troubleshooting.mdx b/docs/faststore/docs/api-extensions/troubleshooting.mdx index 22806e3d78..005add228a 100644 --- a/docs/faststore/docs/api-extensions/troubleshooting.mdx +++ b/docs/faststore/docs/api-extensions/troubleshooting.mdx @@ -4,46 +4,40 @@ title: "Troubleshooting" ## GraphQL changes not visible during development -If your GraphQL changes aren't appearing during development, this is because the changes you have made since you started the development server (`yarn dev`) are probably not optimized yet. +If your GraphQL changes aren't visible during development, the changes you have made since you started the development server (`yarn dev`) are probably not optimized. Follow these steps to trigger the optimization: - Run `yarn generate` (recommended) or `yarn run faststore generate-graphql`. - > ℹ️ This optimization can also be performed while the development server is running. + > ℹ️ This optimization can also be performed while the development server is running. -- Alternatively, you can stop the development server and then restart it using `yarn dev`. - ---- +- Alternatively, you can stop and restart the development server using `yarn dev`. ## Deploy preview/production GraphQL schema different from development -If you notice differences between the GraphQL schema in your deploy preview or production environment compared to your development setup, it may be due to the schema not being optimized since the development server's initiation. +If you notice differences between the GraphQL schema in your deploy preview or production environment compared to your development setup, it may be due to the schema not being optimized since the development server's initiation. The build process optimizes the schema before deployment to accurately reflect the schema declared in the store's code. -Refer to the [GraphQL changes not visible during development](#graphql-changes-not-visible-during-development) topic, to fix the issue. - ---- +To fix the issue, refer to the [GraphQL changes not visible during development](https://developers.vtex.com/docs/api-extension/troubleshooting#graphql-changes-not-visible-during-development) topic. -## Generation errors and warnings +## Type generation errors and warnings -A few errors can happen during the GraphQL Optimizations and types generations. Here's how to troubleshoot them: +Some errors can occur during GraphQL optimizations and type generation. Here's how to troubleshoot them:
`error Failed to run 'yarn generate:schema'. Please check your setup.` -- **Possible cause:** Malformed files in your GraphQL Schema Extensions definitions. - -- **Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders for syntax or definition errors. +**- Possible cause:** Malformed files in your GraphQL Schema Extensions definitions. +**- Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders for syntax or definition errors.
`error GraphQL was not optimized and TS files were not updated. Changes in the GraphQL layer did not take effect` -- **Possible Cause:** Malformed files or GraphQL types within your GraphQL layer, including errors in GraphQL Schema Extensions, declared queries, and fragments. - -- **Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders and component (.ts, tsx) files declaring queries and fragments in your project for syntax or definition errors. +**- Possible Cause:** Malformed files or GraphQL types within your GraphQL layer, including errors in GraphQL Schema Extensions, declared queries, and fragments. +**- Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders and component (.ts, tsx) files declaring queries and fragments in your project for syntax or definition errors.
@@ -58,6 +52,6 @@ To access more detailed error information, use the `--debug` flag when manually ## GraphQL changes not visible in production/deploy preview -During the build step, the GraphQL optimization and type files are always generated fresh, which means they always reflect the most recent changes present in the code. +During the build step, the GraphQL optimization and type files are always generated fresh, which means they always reflect the most recent changes in the code. -If your changes are not visible in production, this means you must not have committed them to the branch you're currently working on. If you see a different GraphQL Schema, queries, or data during development, refer to the [GraphQL changes not visible during development](#graphql-changes-not-visible-during-development) topic. +If your changes are not visible in production, this means you must not have committed them to the branch you're currently working on. If you see different GraphQL schema, queries, or data during development, refer to the [GraphQL changes not visible during development](https://developers.vtex.com/docs/api-extension/troubleshooting#graphql-changes-not-visible-during-development) topic. diff --git a/docs/faststore/docs/customization/api-extensions/_meta.json b/docs/faststore/docs/customization/api-extensions/_meta.json deleted file mode 100644 index 368786fdef..0000000000 --- a/docs/faststore/docs/customization/api-extensions/_meta.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extending-api-schema": "Extending API schemas", - "extending-queries-using-fragments": "Extending queries using fragments", - "consuming-api-extensions": "Consuming FastStore API extension with custom components", - "troubleshooting": "Troubleshooting" -} diff --git a/docs/faststore/docs/customization/api-extensions/consuming-api-extensions.mdx b/docs/faststore/docs/customization/api-extensions/consuming-api-extensions.mdx deleted file mode 100644 index 8c0dd29032..0000000000 --- a/docs/faststore/docs/customization/api-extensions/consuming-api-extensions.mdx +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: "Consuming FastStore API extension with custom components" ---- - -In this guide, learn how to consume new fields from [custom sections](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) and [overridable components](https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions). - -FastStore extends its capabilities through API Extensions, which provide additional data for customization. This guide focuses on using different hooks to access and manipulate data based on the page type or section you are working with. - -## Hooks for consuming API extension data - -FastStore exposes the data from both the FastStore API and FastStore API Extensions within a provider. -The data is provided as a `context` within the provider, and specific hooks are available for different scenarios: - -
-`usePDP()`: Use this hook when integrating your section with a Product Detail Page (PDP). - - ```ts copy - import { usePDP } from "@faststore/core" - - const context = usePDP() - ``` -
- -
-`usePLP()`: Use this hook when integrating your section with a Product Listing Page (PLP). - - ```ts - import { usePLP } from "@faststore/core" - - const context = usePLP() - ``` - -
- -
-`useSearchPage()`: Use this hook when integrating your section on the Search Page. - - ```ts - import { useSearchPage } from "@faststore/core" - - const context = useSearchPage() - ``` - -
- -
-`usePage()`: Use this hook when a single section is used in more than one page type. - - ```ts - import { usePage } from "@faststore/core" - - const context = usePage() - ``` - -This hook returns one of the following context types: `PDPContext`, `PLPContext`, or `SearchPageContext`. You can decide how to handle it depending on the page using this hook by passing these types as generics. - - ```ts - import { usePage } from "@faststore/core" - - const context = usePage() - ``` - -
- -Also, you can use type assertion functions to leverage Typescript and get the correct types. - - ```ts - import { isPDP, isPLP, isSearchPage } from "@faststore/core"; - - const context = usePage() - - isPDP(context) - isPLP(context) - isSearchPage(context) - ``` - -## Consuming API Extensions data from custom sections - -To illustrate how to consume API extension data from custom sections, let's consider a practical example using the **Call To Action** section within a PLP. Make sure you have followed the steps described in the [Creating a new section](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) guide. - -1. Create a new section as explained in the [Creating a new section](https://developers.vtex.com/docs/guides/faststore/building-sections-creating-a-new-section) guide. -2. Import the `usePLP` hook in the component file (`src/components/CallToAction.tsx`) to access data related to PLPs: - - ```ts src/components/CallToAction.tsx - import { usePLP } from "@faststore/core"; - ``` - -3. Inside the component, call the `usePLP` hook to get the context data related to Product Listing Pages. The result is stored in the `context` variable. - - ```tsx - export interface CallToActionProps { - title: string - link: { - text: string - url: string - } - } - - export default function CallToAction(props: CallToActionProps) { - const context = usePLP() - return ( -
-

{`${props.title} ${context?.data?.namedExtraData?.data}`}

-
- ) - ``` -Now, you can use the data from `context` as needed. In the provided example, the component returns a `
` element containing an `

` element, which combines the `title` prop from the component's props with the data extracted from the context. The optional chaining ensures safe navigation through properties that may be undefined or null. Feel free to customize this approach to suit your needs and leverage the retrieved data for your desired functionality. - -## Consuming API Extensions data from custom components in section overrides - -After [overriding native components and props](https://developers.vtex.com/docs/guides/faststore/building-sections-overriding-components-and-props#overriding-a-native-component), you can extend your customization by using hooks within custom components to consume custom data, similar to [custom sections](https://developers.vtex.com/docs/guides/faststore/api-extensions-consuming-api-extensions#consuming-api-extensions-data-from-custom-sections). -In the following example, the `CustomBuyButton` component overrides the native `BuyButton` component from the `ProductDetails` section inside the Product Details Page (PDP). - -1. Open the component file and import the `usePDP` hook from `@faststore/core`. -2. Use the `usePDP` hook to obtain the context specific to the PDP, which contains relevant information about the product displayed on the page. - - ```ts src/components/CustomBuyButton.tsx mark=2,5 - import { Button as UIButton } from '@faststore/ui' - import { usePDP } from "@faststore/core" - - export function CustomBuyButton(props) { - const context = usePDP() - - return ( - { - alert('Hello User!') - }} - > - {context?.data?.product.customData} - - ) - } - - ``` -In this scenario, the `CustomBuyButton` component leverages the `usePDP` hook to access the PDP-specific context. It seamlessly integrates with the `UIButton` component from the FastStore UI library, overriding the default behavior of the native `BuyButton` within the `ProductDetails` section. The content displayed within the button, dynamically retrieves and displays custom data associated with the product from the PDP context. The optional chaining ensures safe navigation through properties that may be undefined or null. diff --git a/docs/faststore/docs/customization/api-extensions/extending-queries-using-fragments.mdx b/docs/faststore/docs/customization/api-extensions/extending-queries-using-fragments.mdx deleted file mode 100644 index 21bd322a0a..0000000000 --- a/docs/faststore/docs/customization/api-extensions/extending-queries-using-fragments.mdx +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: "Extending queries using fragments" ---- - -After [defining the new fields exposed by the FastStore API Extension](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-api-schema), the next step is to specify where these fields will be used within GraphQL fragments. - -[Fragments](https://graphql.org/learn/queries/#fragments) in GraphQL are reusable units that enhance query functionality. FastStore associates these fragments with the existing queries on its pages to incorporate the newly exposed fields. - -> ℹ️ To access the list of queries and their corresponding fragments, check the [extendable queries](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments) section. - -Follow the steps below to add custom fields to an [existing query](https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-queries-using-fragments#extendable-queries). We will use the `ServerProduct` query as an example to illustrate how to extend it. - ---- -## Before you begin - -### Avoid over-fetching data on pages - -Even though you can add information to the FastStore API schema, you must be careful not to over-fetch data on your pages. See the [best practices for fetching data on your storefront](https://developers.vtex.com/docs/guides/faststore/api-extensions-overview#best-practices-for-fetching-data). - ---- - -## Instructions - -### Step 1: Create a new file - -1. In the `src` folder of your store code, create a `fragments` folder. - - ```bash - mkdir fragments -``` - -2. In the `fragments` folder, create a file named `ServerProduct.ts`. - - ```bash - touch ServerProduct.ts - ``` - -> ⚠️ The file name should match the name of the query you want to extend. - -### Step 2: Define the GraphQL fragment - -In the `ServerProduct.ts` file, define the GraphQL fragment corresponding to the new fields you want to retrieve. In this example, the `customData` property represents the new field. Use the following syntax as a guideline: - -```ts src/fragments/ServerProduct.ts - -import { gql } from '@faststore/core/api' - -export const fragment = gql(` - fragment ServerProduct on Query { - product(locator: $locator) { - customData - } - } -`) - -``` -Now, you can consume `customData` by following the [Consuming FastStore API extension with custom components](https://developers.vtex.com/docs/guides/faststore/api-extensions/consuming-api-extensions) guide. - -## Extendable queries - -Extendable queries in FastStore's GraphQL API are predefined queries that form the basis for fetching data from the API. -These queries enable customization by allowing the addition or modification of fields to align data retrieval with your store-specific requirements. - -
-Query: `ClientProductGalleryQuery` - - - - - - - - -
ClientProductGalleryClientsearchPLP - In the hook `useProductGalleryQuery()` from the `ProductListingPage` (`PLP`) and `Search` Pages. - - Products totalCount from [StorePageInfo](https://v1.faststore.dev/reference/api/objects#storepageinfo), and facets ([StoreFacet](https://v1.faststore.dev/reference/api/objects#storefacet)) from - [StoreSearchResult](https://v1.faststore.dev/reference/api/objects#storesearchresult). - - Frontend data from the `useSearch()` and `useLocalizedVariables()` - hooks, the latter uses `useSession()`. -
- -### How to consume it - - Use the `usePage()` hook when you have a single section that is used in more than one type of page. - ```ts - import { usePage } from "@faststore/core" - - const context = usePage() - ``` - This hook returns one of the following types as context: `PDPContext`, `PLPContext`, or `SearchPageContext`, and you can decide how to handle it depending on the page that will use this hook by passing the types as generics. - - ```ts - import { usePage } from "@faststore/core" - - const context = usePage() - ``` -
- -
-Query: `ServerCollectionPageQuery` - - - - - - - - -
ServerCollectionPageServercollectionPLPIn the function `getStaticProps()` from `PLP`. - seo, breadcrumbList and meta data from the collection ([StoreCollection](https://v1.faststore.dev/reference/api/objects#storecollection)). - Collection `slug` that comes from URL.
- -### How to consume it - - Use the `usePLP()` hook when integrating your section with a Product Listing Page (PLP). - ```ts - import { usePLP } from "@faststore/core" - - const context = usePLP() - ``` -
- -
-Query: `ServerProductQuery` - - - - - - - - -
ServerProductServerproductPDPIn the function `getStaticProps()` from `PDP`.General product data from [StoreProduct](https://v1.faststore.dev/reference/api/objects#storeproduct).The `locator` with `slug` key/value.
- -### How to consume it - - `usePDP()`: Use this hook when integrating your section with a Product Detail Page (PDP). - - ```ts - import { usePDP } from "@faststore/core" - - const context = usePDP() - ``` -
- -
-Query: `ClientProductQuery` - - - - - - - - -
ClientProductClientproductPDPIn the hook `useProductQuery()` from `PDP`. - General product data from [StoreProduct](https://v1.faststore.dev/reference/api/objects#storeproduct) to update product data inside - `PDP` (product coming from `ServerProductQuery` as fallback). - - Frontend data from the `useSession()` hook in the locator array with - `id`, `channel`, `locale` as key/values. -
- -### How to consume it - - `usePDP()`: Use this hook when integrating your section with a Product Detail Page (PDP). - - ```ts - import { usePDP } from "@faststore/core" - - const context = usePDP() - ``` -
- -
-Query: `ClientManyProductsQuery` - - - - - - - - -
ClientManyProductsClientsearch - `PLP`, `Search Page`, and pages that use `ProductShelf`, and `ProductTiles` components. - - - In the hook `usePageProductsQuery()` from `PLP` and `Search Page`. -
- - In the hook `useProductsPrefetch()` to prefetch the previous (prev) - and next (next) page from the current `PLP` or `Search Page`. -
- - In the hook `useProductsQuery()`, in `ProductShelf`, `ProductTiles` - components, that can be used on multiple pages. -
-
- General products data ([StoreProduct](https://v1.faststore.dev/reference/api/objects#storeproduct)) with the `totalCount` from [StorePageInfo](https://v1.faststore.dev/reference/api/objects#storepageinfo). - - Frontend data from the `useLocalizedVariables()` and `useSession()` hooks. -
- -### How to consume it - - Use the `usePage()` hook when you have a single section that is used in more than one type of page. - ```ts - import { usePage } from "@faststore/core" - - const context = usePage() - ``` - This hook returns one of the following types as context: `PDPContext`, `PLPContext`, or `SearchPageContext`, and you can decide how to handle it depending on the page that will use this hook by passing the types as generics. - - ```ts - import { usePage } from "@faststore/core" - - const context = usePage() - ``` -
- -
-Query: `ClientShippingSimulationQuery` - - - - - - - - -
ClientShippingSimulationClientshippingPDPIn the `ShippingSimulation` component. - General shipping simulation data with the `address` and `logisticsInfo`. - - Frontend `country`, and `postalCode` from `useSession()` hook, and the `items` Array of `IShippingItem` (`id`, `quantity`, and `seller`). -
- -### How to consume it - - You can use the experimental `useShippingSimulation_unstable()` hook, or the `getShippingSimulation_unstable()` function to retrieve shipping data in Overridable (custom) components. -
- -
-Query: `ClientSearchSuggestionsQuery` - - - - - - - - -
ClientSearchSuggestionsClientsearch`SearchInput` component from `GlobalSection`.In the `SearchInput` component.General search data with the `suggestions` and `products`.Frontend data from `useSession()` hook, and the `term` searched.
- -### How to consume it - -You can use the experimental `useSuggestions_unstable()` hook to retrieve the search suggestions data in Overridable (custom) components. -
- -
-Query: `ClientTopSearchSuggestionsQuery` - - - - - - - - -
ClientTopSearchSuggestionsClientsearch`SearchInput` component from `GlobalSection`.In the `SearchInput` component.The top searched suggestions.Frontend data from `useSession()` hook.
- -### How to consume it - -You can use the experimental `useTopSearch_unstable()` hook to retrieve the top search suggestions data in Overridable (custom) components. -
diff --git a/docs/faststore/docs/customization/api-extensions/troubleshooting.mdx b/docs/faststore/docs/customization/api-extensions/troubleshooting.mdx deleted file mode 100644 index 005add228a..0000000000 --- a/docs/faststore/docs/customization/api-extensions/troubleshooting.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: "Troubleshooting" ---- - -## GraphQL changes not visible during development - -If your GraphQL changes aren't visible during development, the changes you have made since you started the development server (`yarn dev`) are probably not optimized. -Follow these steps to trigger the optimization: - -- Run `yarn generate` (recommended) or `yarn run faststore generate-graphql`. - - > ℹ️ This optimization can also be performed while the development server is running. - -- Alternatively, you can stop and restart the development server using `yarn dev`. - -## Deploy preview/production GraphQL schema different from development - -If you notice differences between the GraphQL schema in your deploy preview or production environment compared to your development setup, it may be due to the schema not being optimized since the development server's initiation. -The build process optimizes the schema before deployment to accurately reflect the schema declared in the store's code. - -To fix the issue, refer to the [GraphQL changes not visible during development](https://developers.vtex.com/docs/api-extension/troubleshooting#graphql-changes-not-visible-during-development) topic. - -## Type generation errors and warnings - -Some errors can occur during GraphQL optimizations and type generation. Here's how to troubleshoot them: - -
-`error Failed to run 'yarn generate:schema'. Please check your setup.` - -**- Possible cause:** Malformed files in your GraphQL Schema Extensions definitions. - -**- Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders for syntax or definition errors. -
- -
-`error GraphQL was not optimized and TS files were not updated. Changes in the GraphQL layer did not take effect` - -**- Possible Cause:** Malformed files or GraphQL types within your GraphQL layer, including errors in GraphQL Schema Extensions, declared queries, and fragments. - -**- Solution:** Check the graphql files inside the `src/graphql/(vtex or thirdParty)/typeDefs` folders and component (.ts, tsx) files declaring queries and fragments in your project for syntax or definition errors. -
- -
-`warn Failed to format generated files. 'yarn format:generated' thrown errors` - -After generating GraphQL Optimization and types files, they are formatted for readability. This step is recommended but not mandatory. If it fails, your changes to the GraphQL layer will still be visible. Therefore, it is a warning, not an error. -
- -### Error details - -To access more detailed error information, use the `--debug` flag when manually running the `yarn generate` command to see detailed errors on why the generation has failed. - -## GraphQL changes not visible in production/deploy preview - -During the build step, the GraphQL optimization and type files are always generated fresh, which means they always reflect the most recent changes in the code. - -If your changes are not visible in production, this means you must not have committed them to the branch you're currently working on. If you see different GraphQL schema, queries, or data during development, refer to the [GraphQL changes not visible during development](https://developers.vtex.com/docs/api-extension/troubleshooting#graphql-changes-not-visible-during-development) topic. diff --git a/docs/faststore/docs/faststore-api/schema/objects.mdx b/docs/faststore/docs/faststore-api/schema/objects.mdx index af22d05608..6149b466fc 100644 --- a/docs/faststore/docs/faststore-api/schema/objects.mdx +++ b/docs/faststore/docs/faststore-api/schema/objects.mdx @@ -1681,6 +1681,68 @@ The delivery window end date information. +### StoreFacet + +Search facet information. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FieldArgumentTypeDescription
keyString! + +Facet key. + +
labelString! + +Facet label. + +
values[StoreFacetValue!]! + +Array with information on each facet value. + +
typeStoreFacetBoolean! + +Facet type. Possible values are `BOOLEAN` and `RANGE`. + +
typeStoreFacetRange! + +Facet type. + +
+ ### StoreFacetBoolean Search facet boolean information.