为什么需要 graphql-tag 才能将 Apollo 与 Nuxt 一起使用？

Question

我试图理解为什么大多数关于 Nuxt 和 Apollo 的教程也建议安装 graphql-tag package。

@nuxt/apollo 模块文档 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 使用单独的 .gql 文件，尽管没有安装了 graphql-tag。

我读过，但它似乎并没有真正回答我的问题。它只是谈论查询解析。

谁能准确地告诉我 graphql-tag 的作用以及是否（理论上以及如何）在没有安装的情况下将 Apollo 与 Nuxt 一起使用？

Answer 1

我不是 graphQL 专家，但在过去的几个月里我仍然成功地使用它。最后，我发现 graphql-tag 仅在直接对 .vue 组件使用内联查询时才有用。

喜欢这个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>

同时，由于它不是很灵活，我最终像这样在 Vuex 中导入和使用它

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
    }
  }
}

.gql导入的文件是这样写的

query{
  Entity {
    things
  }
}

对于这种配置，您不需要 graphql-tag。此外，有些人在他们的 graphql 文件中有一些灵活的配置，他们使用普通的 .js 文件和他们实际的 GQL 查询 + graphql-tag 的混合（如果它不是 .gql 文件则需要).

如果使用 TypeScript 也很有用，这里是一个例子：https://github.com/DNature/chef-assignment/blob/master/apollo/queries/index.ts

是的，那是我的 2 克拉。不是专业人士，但我从几个月摆弄 GraphQL 中了解到的东西。

为什么需要 graphql-tag 才能将 Apollo 与 Nuxt 一起使用？

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

apollo

vue.js

graphql

nuxt.js