My project is based on the PayloadCMS site and Server
These 2 repos
-
https://github.com/payloadcms/website-
https://github.com/payloadcms/website-cmsI 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. @noheadphones 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
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
Discord
online
Get help straight from the Payload team with an Enterprise License.