Working with Nuxt, TypeScript, and ApolloClient: A beginner’s Dilemma

The introduction of Typescript to Vue 3 was more like that clarion call Vuejs developers needed to start migrating their codebases from JavaScript to TypeScript. I was skeptical about learning TypeScript at first but really TS is great. One of the major downsides (my opinion) to the language is how difficult it can be when setting up your dev environment and since most JavaScript developers are not used to strongly typed languages, working with TS would definitely speed up the rate of hair loss.

Over the years, TS has gotten great support from the React community but not so well with Vuejs. A few weeks ago, Vue 3 with TS support was finally released coupled with the latest version of our favorite framework nuxt. Nuxt also has full TS support and it’s now easy to set up with create-nuxt-app.

However, working with graphql APIs has always been tricky with Nuxt even when ApolloGraphql client makes it easy. The major reason here can be attributed to poor documentation for Nuxt, TS, and GraphQL stack. I am a big fan of Nuxt and Graphql, so I decided to work on this, and here are some of the insights I got Working with Nuxt, TypeScript, and ApolloClient.

The API

You would need a graphQL API for this, thanks to Hasura, I set up this endpoint (https://prime-barnacle-15.hasura.app/v1/graphql) in 5 minutes. If you’ve never used Hasura and vue-apollo, I made a detailed guide in one of my previous posts here.

Setting up the Project

Let’s assume you’ve worked with Nuxt prior to this (but if you haven’t check the guide here). Just select Typescript as language and choose whatever options that suits you.
From the box, you get @nuxt/types and @``**nuxt/typescript-build** modules configured. It also gives you a tsconfig.json file where we can play around with compiler options (it’s very similar to jsconfig.json).
Then for linting, you have typescript eslint-config already set up for you.
Run your development server with yarn dev.
Essentially, what that does is trigger the nuxt-typescript runtime which is just a wrapper to provide runtime support for nuxt-config and so on.

Integrating ApolloClient

The awesome open source community contributing to the Nuxt project provides us with a wrapper module for Vue-apollo.
Install @nuxtjs/apollo, then add "vue-apollo/types``" to “types” in your nuxt-config.

We need to add @nuxtjs/apollo to modules in nuxt.config.js.

modules: [
    '@nuxtjs/apollo'
  ],

Then also add the apollo object to our config.

 apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'Your API endpoint'
      }
    }
  }

So far, so good.

Making queries and mutations

Create a folder in the root directory for the queries and mutations. For a query, you could have something like this:

// graphql\queries\user.gql
query allUsers{
  user{
    id
    first_name
    last_name
    about
    age
  }
}

and for mutations, something like this:

// graphql\mutations\insert_user.gql
mutation($first_name: String! $last_name: String! $about: String $age: Int ){
  insert_user(objects:{
    first_name: $first_name, last_name: $last_name, about: $about, age: $age
  }){
    returning{
      id
      first_name
      last_name
      about
      age
    }
  }
}

You should take notes of the relative paths.

Instinctively, with Javascript, you would want to import them as modules and move on with your life. But you see, TS doesn’t understand graphql tags that way. GraphQL Code generator would help us generate TS typings from our API schema and this would enable TS to recognize our graphql files as modules.

Now install these dependencies

yarn add @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-graphql-files-modules @graphql-codegen/typescript-operations

That’s all you need.
Create a config.yml file in the root directory and add this

// config.yml
schema: https://prime-barnacle-15.hasura.app/v1/graphql
documents: ./graphql/**/*.gql
generates:
  types/graphql.d.ts:
    - typescript-graphql-files-modules
  types/types.ts:
    - typescript
    - typescript-operations

Go to your package.json and add this to scripts

"gen": "graphql-codegen --config config.yml"

Now, run yarn gen and this would generate a types folder with TS typings from your schema in types.ts.

So that’s it! Now you can go ahead and work on your Nuxt, TS and GraphQL project.

Summary

TypeScript makes our codebases less buggy and the more you get used to it, you will spend less time with development issues. Nuxt, TypeScript and Graphql is an awesome stack and in the nearest future, a lot of companies would be adopting this very soon, so stay woke!