Why is graphql-tag needed to use Apollo with Nuxt?

Question

I'm trying to understand why most tutorials on Nuxt and Apollo also suggest installing the graphql-tag package.

The @nuxt/apollo module docs say this is optional, if you want to load separated .gql files (as opposed to... writing your queries inline in your components?) And the official Nuxt/Apollo demo uses separated .gql files despite not having graphql-tag installed.

I've read this, but it doesn't really seem to answer my question. It just talks about query parsing.

Can anyone tell me precisely what graphql-tag does and whether (and how, in theory) you'd use Apollo with Nuxt without it installed?

score 2 · Accepted Answer · answered Jul 01 '21 at 12:42

I'm not a graphQL expert but I still achieved to work with it the few last months. At the end, I found out that graphql-tag is only useful when using inline queries directly into your .vue components.

Like in this documentation section

<template>
  <div>{{ hello }}</div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    // Simple query that will update the 'hello' vue property
    hello: gql`query {
      hello
    }`,
  },
}
</script>

Meanwhile, since it's not very flexible, I've ended up importing and using it in Vuex like this

import myGqlQuery from '~/apollo/queries/test.gql'

const actions = {
  async myFancyVuexAction({ commit, dispatch }) {
    try {
      const { errors, data } = await this.app.apolloProvider.defaultClient.query({ query: myGqlQuery })
    } else {
      // error
    }
  }
}

With the .gql imported file being written like this

query{
  Entity {
    things
  }
}

For this kind of configuration, you don't need graphql-tag. Also, some people have some flexible configuration inside of their graphql files, they are using vanilla .js files and a mix of their actual GQL query + graphql-tag (needed if it's not a .gql file).

It is also useful if using TypeScript, here is an example: https://github.com/DNature/chef-assignment/blob/master/apollo/queries/index.ts

So yeah, those are my 2cts. Not a pro, but things that I understood from my few months fiddling with GraphQL.

Why is graphql-tag needed to use Apollo with Nuxt?

1 Answers1