Query is always empty, can't get generator to work

[viveleroi]

I've been trying to get codegen working in a new project that also uses apollo client and pothos. I've followed every instruction I can find, read the docs, etc. No matter what I do, the codegen appears to create the typescript files correctly, but there's never a query actually present. Apollo Client and pothos seem unrelated this, the same happens when I make a schema.graphql file like the docs show.

When I try const query = graphql('query { greetings }'), the query is just an empty {}

Here's the page where it's used:

https://github.com/viveleroi/graphql-issue/blob/main/app/(application)/dashboard/page.tsx

Here's the actual codegen.ts file: https://github.com/viveleroi/graphql-issue/blob/main/codegen.ts

This repo is a minimal reproduction so you can look through it. I assume I'm doing something wrong but I can't figure out what.

[charpeni]

Good thing you reached out, and thanks for the repo! Let's fix it.

The first thing to mention here is that documents field is missing from codegen's config:

const config: CodegenConfig = {
  schema: printSchema(schema),
+ documents: ['app/**/*.tsx'],
  generates: {
    './gql/': {
      preset: 'client',
      plugins: []
    }
  }
}

Then, GraphQL documents should be defined within backticks:

const query = graphql(/* GraphQL */ `
  query {
    greetings
  }
`);

Finally, anonymous queries and mutations are ignored, we need to provide a name for that query:

const query = graphql(/* GraphQL */ `
+ query Greetings {
    greetings
  }
`);

[viveleroi]

Thanks for the reply! I'm happy this was answered.

I guess I was just confused by what "documents" are? I thought maybe they'd be separate files defining a schema but then examples used .tsx which means they're react components? Are they just react components that have gql queries? Meaning my dashboard/page.tsx considered a "document"?

[charpeni]

Correct, they are considered React components with embedded GraphQL documents.

Documents refer to where GraphQL fragments and operations are defined. I personally defined those as embedded too, but some people define them as colocated .graphql files.

The codegen has mostly three steps: load GraphQL schemas, load GraphQL documents, then generate. In your case, it was only reading the schema and generating appropriate types, but not queries, because documents weren't provided—and even if provided they need to be provided via the generated graphql function, use backticks, and be named.

[viveleroi]

Thanks! Looks like this solves it, this was bugging me! What purpose does the /* GraphQL */ comment have? Doesn't seem to be necessary and not sure it changes anything with VSCode. A comment in that spot violates a lint rule we have so trying to decide which to keep.

[charpeni]

Once upon a time, not all language server protocol supported (e.g., GraphQL: Language Feature Support vs. Apollo GraphQL) using the generated graphql function as a valid GraphQL element:

graphql(`query {}`)
// vs.
graphql`query {}`

So, the GraphQL magic comment was added as an anchor to look for when parsing GraphQL strings. If not adding it doesn't improve anything in your IDE, you don't need to use it.