Nuxt 3 + Apollo Client
Tags: nuxt, vue, apollo, graphql
Published: 2022-01-10 06:13:27

---
title: Nuxt 3 + Apollo Client
published: true
description: Here's how to get apollo client up and running with nuxt 3.
tags: Nuxt, Vue, apollo, graphql
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gydvku5p7xbo3n959e71.jpg
---

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.
```bash
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`
```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
```js
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`:
```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`
```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`

```js
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](https://github.com/nuxt-community/apollo-module), or check out [this module I found on Github](https://github.com/newbeea/nuxt3-apollo-module).

### Thanks for Reading
I hope this was helpful.