feat: migrate to nuxt v3

[nicktrn]

I've tried my best to stick with the simplicity of the original module.

Breaking changes:

• graphql-request exports are now available from nuxt-graphql-request/utils instead as importing directly from module entry points is no longer allowed.
• fetch polyfill is now disabled by default as Nuxt 3 globally exposes the fetch API
• "Nuxt no longer provides a Vuex integration. Instead, the official Vue recommendation is to use pinia" - I have provided a playground example using pinia, although using vuex should still work following manual setup.

New features:

• gql file imports are now vite and webpack compatible
• automatic type generation
• testing with vitest
• responses can be fully typed with TypedDocumentNode (used by two of the test pages as examples)

Fixes:

• defining a client at runtime only now works as expected

Please give it a spin and let me know where it breaks!

How to test

Some options here:

1. Run yarn test
2. Run yarn dev to experiment in playground
3. Run yarn prepack and add to existing Nuxt project via file import, e.g. yarn add "../nuxt-graphql-request"
4. Run yarn pack and add to Nuxt project via yarn add <path_to_module.tgz>

I have had unexpected results using yarn link, so this method is not recommended.

Fixes #52 /claim #52

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nuxt-graphql-request	❌ Failed (Inspect)			Sep 12, 2023 11:07am

[drewbaker]

So hyped to see this! Will try out next week and looking forward to paying out the bounty!

[nicktrn]

@drewbaker Happy to see the enthusiasm!

Had a chance to try this yet? Did quite a bit of testing myself and included additional test instructions above. Will be unavailable for most of next week, so would be great to finalise this ASAP.

[drewbaker]

@nicktrn planning on getting into this week actually. Sorry about the timing. This was a big blocker on us using Nuxt3, so we have some catching up to do in terms of just moving from Nuxt2 to Nuxt3.

Having said that, I'm not even sure how to test this? Never tried to install a PR before. Also, any tips on how to use this in a Nuxt3 project? Probably need to update the readme.

Would love to have your email for future projects BTW. Email me drew@funkhaus.us please.

[nicktrn]

For local testing, you could clone my fork and switch to the nuxt-v3 branch:

git clone https://github.com/nicktrn/nuxt-graphql-request.git
cd nuxt-graphql-request && git checkout nuxt-v3

Or, if you have already cloned this repo, you can do this:

git fetch origin pull/53/head:nuxt-v3
git checkout nuxt-v3

Then just pick your poison from the "How to test" section above.

Using this in a Nuxt 3 project is straightforward. There's a working playground.

Specifically, have a look at https://github.com/nicktrn/nuxt-graphql-request/blob/nuxt-v3/playground/nuxt.config.ts and pages/index.vue. Config is identical to current, and usage nearly so, bar some v3-related changes such as useAsyncData and useNuxtApp.

If you have any questions just let me know, will be able to have a look over the weekend or early next week. Speak to you then.

[awdr74100]

Are there any updates on the progress so far? This may be the only module in the client that works properly.

[nicktrn]

Hey @awdr74100, should all be working. Would be great if you could test this locally!

My current plan is to publish my fork on NPM unless @Gomah shows up in the next couple of days.

[Gomah]

Thank you @nicktrn for this PR, looks great, I just tested it locally 👍🏻

Happy to merge & publish it when the docs are up to date, I don't have much time to tackle it at the moment

[nicktrn]

That summoning spell worked a treat - thanks for testing! Will ping you when the docs are ready.

[nicktrn]

Docs are ready! @Gomah

Updated all code blocks to SFC Composition API syntax and fixed a dependency issue on nuxt generate.

[Gomah]

Thanks @nicktrn, having a look now, should release soon ✌🏻