Use graphql-codegen with fetch api in Nextjs 14

[ashishch-98]

Hi, in my old configuration with Apollo Client the generated file contained types and export for the GraphQl query:

    export const AllProductsQuery = gql` 
     query{
      ....
    }
    `

Now, I'm moving away from Apollo Client and want to use Fetch API with Nextjs app router. Codegen wraps the GraphQl query in gql tag, due to which the Fetch API throws a 500 error. If I directly paste the query without gql I get the results. Below is an example when it's failing.

const fetchData = async () => {
  const query = AllProductsQuery ; // Use the generated query

  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query
    }),
  });

  const result = await response.json();
  console.log(result.data);
};

The codegen.ts config is as below:

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  overwrite: true,
  schema: process.env.SCHEMA,
  documents: "src/lib/graphql/**/*.{gql,graphql}",
  debug: true,
  verbose: true,
  ignoreNoDocuments: true,
  watch: true,
  generates: {
    "src/lib/graphql/generated/graphql.ts": {
      plugins: [
        "typescript",
          "typescript-operations"
      ],
    },
  },
};

export default config;

I want to get the query in the generated file without the gql tag so I can easily use that in Fetch API.

[Urigo]

Can you share a reproduction we can run? Maybe in a repo or better in CodeSandbox?
Also, maybe you want to try client-preset instead of using typescript and `typescript-operations?

[ashishch-98]

I have tried using the client-preset and typescript but was not able to get the desired results. You can check my repo here.

[Urigo]

Please follow the instructions here

You don't need explicitly install @graphql-codegen/typescript and @graphql-codegen/typescript-operations and use the config from the docs and you don't need this

also I would recommend to read this post fully

[ashishch-98]

Thanks for looking into it. I have updated the config to use the client-preset and seeing the changes, but still having issues with implementing the query using fetch. I have updated the repo with the updated code. On executing fetch I get the error message {"errors":[{"message":"Must provide query string."}]}. Maybe I'm missing just a small line of config 😢.

[ashishch-98]

I finally resolved it using the DocumentMode. It's a line of config that was needed. Thanks for the guides!