How to properly use the graphql-request library

Hi, I'm trying to use the graphql-request library but I'm getting an error that says ...not a valid key=value pair (missing equal-sign) in Authorization header: 'Token ...'.

The code in question looks something like this:

  const client = new GraphQLClient('https://my-repo.prismic.io/graphql', {
    headers: {
      'Prismic-Ref': 'ref', // manually added for now
      "Authorization": `Token ${process.env.PRISMIC_API_TOKEN}` // properly loaded env via '.env.local'
    }
  })

  // ... some lines of code that does the request

The framework I'm using is Next.js so assume that this is called on the server-side.

My goal is to be able to use graphql-request along with react-query from generated code (graqphl-codegen).

Would anyone be able help me? Thank you.

1 Like

Hello @iwatakeshi, have you tried using our dedicated Prismic-Apollo Link? It allows you to query the Prismic GraphQL API with apollo-client:

You can see an example of how a query is made using this kit, here:

Hi @Pau, thank you for the reply. Yes, I have used Apollo before, but I thought to try out another library and compare the speed of development. I guess I could use Apollo, but I thought to ask in case anyone has experience with graphql-request.

Another thing I realized is that this issue also occurs when I configure an IntelliJ plugin called JS GraphQL.

I see. Thanks for sharing. Unfortunately, at the moment, we don't have a working example that uses graphql-request.

This thread has been closed due to inactivity. Flag to reopen.

It happens when the /graphql pathname concatenates the queryString with a "/"

i.e. https://...prismic.io/graphql/?query=... instead of https://...prismic.io/graphql?query=...

Hey @scubillos, thanks for joining the conversation

Yes, maybe you need to manually add the Prismic GraphQL endpoint not to add that additional slash.

That's right. You have to avoid that

Thanks for sharing that @scubillos.

1 Like

This might be helpful:

Thanks for sharing, @lpender.