Connecting Payload to NextJS frontend using the GraphQL query generator based on Schema

techinverted2 years ago

1

• 

  paulpopus2 years ago

  I'll try to see if I can help...

  
  
  

  my package.json deps:

  
  

  @tanstack/react-query
  graphql
  graphql-request

  
  
  

  dev deps:

  
  

  typescript
  @graphql-codegen/cli
  @graphql-codegen/client-preset
  @graphql-codegen/introspection
  @graphql-codegen/typescript-react-query

  
  
  

  in the root dir i have a codegen.ts file with

  
  

  import type { CodegenConfig } from '@graphql-codegen/cli'
  
  const config: CodegenConfig = {
    overwrite: true,
    schema: '<api url with `/api/graph` ending>',
    documents: 'graphql/**/*.graphql',
    generates: {
      'graphql/generated/client.ts': {
        plugins: ['typescript', 'typescript-operations', 'typescript-react-query'],
        config: {
          exposeQueryKeys: true,
          exposeFetcher: true,
          withHooks: true,
          dedupeFragments: true,
          fetcher: {
            endpoint: '<api url with `/api/graph` ending>',
            fetchParams: {
              headers: {
                'content-type': 'application/json',
              },
            },
          },
        },
      },
    },
  }
  
  export default config

  
  
  

  package.json has this script as well

  
  

  "gen:graphql": "graphql-codegen --config codegen.ts"

  
  
  

  then i have a graphql folder, inside it theres a generated folder (empty initially)

  
  

  then a queries folder where i put my queries in files

  .graphql

  ...eg:

  
  

  query GetGlobal {
    Global {
      title
    }
  }

  
  

  a named query and inside a valid query to my API

  
  
  

  i have a query client ts file

  
  
  

  import { QueryClient } from '@tanstack/react-query'
  
  const queryClient = new QueryClient()
  
  export default queryClient

  
  
  

  i then import that

  queryClient

  in _app.tsx and wrap my page components with it

  
  
  

  import queryClient from '@utilities/queryClient'
  import { QueryClientProvider } from '@tanstack/react-query'
  
  //..
  <QueryClientProvider client={queryClient}>
  //... add your children here, eg. the default <Component 
  </QueryClientProvider>

  
  
  

  lastly just run

  yarn gen:graphql

  and if you have a query you should get a successful output