Nuxt 3 + Apollo Client

If you're working on a Nuxt 3 project, and trying to get Apollo up and running, only to find that the nuxt module isn't updated yet for v3, then follow along.

As of late 2021 and early 2022, the Nuxt Community Apollo module is still in limbo for an update to play along with Nuxt 3, and I'm not patient enough to wait many more months for that. The question of why I'm bothering with Nuxt 3 this early on, is irrelevant, I merely just want to play around with it.

This is an extremely minimal demonstration, and should by no means be used for production without extra configuration.

Assuming you already have a Nuxt 3 project ready, let's move on to step 1.

---

Part 1: Installing the Dependencies

We'll use both @apollo/client and vue-apollo which is updated to work with Vue 3, and therefore willl work fine inside our Nuxt 3 project.

yarn add vue-apollo @apollo/client graphql

---

Part 2: Creating the Plugin

If you don't already have a plugin folder in your root directory, make one and create a js file inside to represent your Apollo Client

root/
- components/
- api/
- pages/
- plugins/           <--
  - apollo-client.js <--
- etc...

apollo-client.js

import { defineNuxtPlugin } from "#app"
import { ApolloClient, InMemoryCache } from "@apollo/client/core"
import { DefaultApolloClient } from "@vue/apollo-composable"

export default defineNuxtPlugin((nuxtApp) => {
  const apolloClient = new ApolloClient({
    cache: new InMemoryCache()
    // configuration //
  })
  nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
})

---

Part 3: Configuration

To keep things secure, I recommend using environment variables to store your api keys and credentials.

.env

API_ENDPOINT="https://your-api.com"

In our apollo-client.js file, populate your config with

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  uri: process.env.API_ENDPOINT <-- add your uri
  // other configuration
})

You can read up on ways to configure your apollo client here: https://www.apollographql.com/docs/devtools/apollo-config/

---

Part 4: Nuxt Configuration

Almost nothing needs to be done here, Nuxt automatically imports your javascript files located in the plugins/ folder. We do still need to add to our build config.

In our build config in nuxt.config.js:

  build: {
    transpile: [
      '@apollo/client',
      'ts-invariant/process',
    ],
  },

If you do not add @apollo/client and ts-invariant/process into transpile, you will face an error.

---

Part 5: Using Apollo

I've created a query in our api/folder called queries.js

import { gql } from "@apollo/client/core"

export const GET_POSTS = gql`
  query posts {
    posts (first: 20) {
      id
      title
    }
  }
`

In our Vue file, let's import useQuery from vue-apollo

import { useQuery, useResult } from '@vue/apollo-composable'
import { GET_POSTS } from '@/api/queries'

const { loading, result } = useQuery(GET_POSTS)

---

Conclusion

This is merely just a minimal demonstration of how to get apollo up and running with your Nuxt 3 project, not a fleshed out or production-ready solution. If you'd like to have a more official solution that doesn't involve creating your own plugin, either wait for Nuxt 3 support on the official Apollo Nuxt Module, or check out this module I found on Github.

Thanks for Reading

I hope this was helpful.

Comments

[Mathieu Marteau]

Hey! Thank you for this post!

[megabam5]

Awesome post, exactly what I was looking for!

Unfortunately when installing the dependencies it seems like @vue/apollo-composables has not been installed and installing it manually gives me dependency conflicts :(

[Josh Corbett]

Try moving @vue/apollo-composable and vue-apollo to devDependencies

[Sharkfin]

me too...

[namvvo]

I always get error "networkError: FetchError: request to localhost:5001/api/data failed, reason: self signed certificate as stated at stackoverflow.com/questions/758840...

anyone know how to fix it ?

[Katia GIL GUZMAN]

Thank you for this post, that's also exactly what I'm looking for.
However, like the others below, I get an error with @vue/apollo-composables:

Could you please help?

Here are my dependencies:

    "@antfu/eslint-config": "^0.10.0",
    "@apollo/client": "^3.5.9",
    "@iconify/json": "^1.1.431",
    "@nuxt/bridge-edge": "latest",
    "@nuxt/kit-edge": "latest",
    "@nuxtclub/feathericons": "^1.0.0",
    "@unocss/nuxt": "^0.11.1",
    "@vue/apollo-composable": "^4.0.0-alpha.16",
    "@vue/runtime-dom": "^3.2.22",
    "@vueuse/core": "^6.9.1",
    "eslint": "^8.2.0",
    "graphql": "^16.3.0",
    "graphql-tag": "^2.12.6",
    "nuxi-edge": "latest",
    "nuxt-edge": "latest",
    "nuxt-windicss": "^2.2.1",
    "sass": "^1.45.1",
    "typescript": "4.4.4",
    "vue-apollo": "^3.1.0"

[Josh Corbett]

Try moving @vue/apollo-composable and vue-apollo to devDependencies

[Alexandre Thebault]

For those who get errors when installing @vue/apollo-composables, that talks about having vue@2.6 conflict or something like that, you could try adding this to your package.json :

  "overrides": {
    "vue": "3"
  }

"Overrides" works with npm, with yarn I think it's "resolutions"

[thevalleydev]

Thanks for the post. It worked great for dev but when I build and start the app I get errors when attempting to load a page.

`Directory import '.output\server\node_modules\@apollo\client\core' is not supported resolving ES modules imported

Did you mean to import @apollo/client/core/index.js?`

[namvvo]

thanks a lot. But how can I provide multiple client endpoints.

vue4 setup provide:

provide(ApolloClients, {
default: apolloClient,
clientA: apolloClientA,
clientB: apolloClientB,
})

how to get nuxt to provide same?

nuxtApp.vueApp.provide(DefaultApolloClient, {
default: apolloClient => not working
});

[Daan de Gooijer]

Thanks for the post, but cannot get this to work. When adding @apollo/client to transpile, i get the following error:
external_graphql_tag_default.a is not a function

Any help would be swell, trying to migrate my nuxt 2 to bridge and it isn't going well :D

[Josh Corbett]

This is for nuxt 3, not sure how this measures up with bridge