Storefront GraphQL Code Generation

import type { CodegenConfig } from '@graphql-codegen/cli';const config: CodegenConfig = {  overwrite: true,  schema: 'http://localhost:3000/shop-api',  documents: 'src/**/*.graphql.ts',  generates: {    'src/gql/': {      preset: 'client',      plugins: [],      config: { // [!code highlight]        scalars: { // [!code highlight]            // This tells codegen that the `Money` scalar is a number // [!code highlight]            Money: 'number', // [!code highlight]        }, // [!code highlight]        namingConvention: { // [!code highlight]            // This ensures generated enums do not conflict with the built-in types. // [!code highlight]            enumValues: 'keep', // [!code highlight]        }, // [!code highlight]      } // [!code highlight]    },  }};export default config;

npm run codegen

import { useQuery } from '@tanstack/react-query';import request from 'graphql-request'import { graphql } from './gql'; // [!code highlight]// GET_PRODUCTS will be a `TypedDocumentNode` type, // [!code highlight]// which encodes the types of the query variables and the response data. // [!code highlight]const GET_PRODUCTS = graphql(` // [!code highlight]    query GetProducts($options: ProductListOptions) {        products(options: $options) {            items {                id                name                slug                featuredAsset {                    preview                }            }        }    }`);export default function App() {  // `data` will now be correctly typed // [!code highlight]  const { isLoading, data } = useQuery({ // [!code highlight]    queryKey: ['products'],    queryFn: async () =>      request(        'http://localhost:3000/shop-api',        GET_PRODUCTS, // [!code highlight]        { // [!code highlight]        // The variables will also be correctly typed // [!code highlight]        options: { take: 3 }, // [!code highlight]        } // [!code highlight]      ),  });  if (isLoading) return <p>Loading...</p>;  return data ? (    data.products.items.map(({ id, name, slug, featuredAsset }) => (      <div key={id}>        <h3>{name}</h3>        <img src={`${featuredAsset.preview}?preset=small`} alt={name} />      </div>    ))  ) : (    <>Loading...</>  );}