Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

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

default discord avatar
techinverted2 years ago
1

My project is based on the PayloadCMS site and Server


These 2 repos


-

https://github.com/payloadcms/website

-

https://github.com/payloadcms/website-cms


I need to generate the frontend GraphQL queries from the Schema generated in the backend as I haven’t been able to get my queries to work.

@858693520012476436

do let me know if you can help. I haven’t added any new packages other than graphql-codegen and everything is running versions as per package.json

  • default discord avatar
    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



Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.