TypeError [ERR_INVALID_ARG_TYPE] when trying to access graphiql

[Christopher-Warren]

I'm attempting to get graphql-yoga to work in a preexisting next project.

After using create-next-app, i installed both graphql-yoga, graphql, and copy/pasted the example pages/api/graphql.ts from the nextjs examples repo https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql

I can query the endpoint and get the proper response, but when i visit http://localhost:3000/api/graphql in the browser(to access graphiql), the browser hangs, and nextjs throws this error.
unhandledRejection: TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received type function ([Function (anonymous)])

What really baffles me is when i create a new project using npx create-next-app --example api-routes-graphql api-routes-graphql-app, graphiql loads as expected.

Can anyone point me in the right direction of figuring this out?

[ardatan]

I think that template needs to be updated. You can check GraphQL Yoga's own Next.js integration recipe and example;
https://the-guild.dev/graphql/yoga-server/docs/integrations/integration-with-nextjs

I created a PR on Next.js repo to update the example;
vercel/next.js#44488

[Christopher-Warren]

I tried the template supplied by the graphql-yoga docs and I am still having this issue. A clean install of next, and graphql-yoga will not work... however if i change the version to three (like in the next.js examples) it does work. I'm thinking this is a bug with one of the newer commits.

[ardatan]

That's what I updated in that repo :) and that's why I asked you to follow our docs instead.

[Christopher-Warren]

Hmm... I still seem to be having the same issue with 3.2.1 and Next.js. I opened an error that explains more. #2268

[Christopher-Warren]

It appears others are having this issue as well. #2259