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

【问题标题】：Why is graphql-tag needed to use Apollo with Nuxt?为什么将 Apollo 与 Nuxt 一起使用需要 graphql-tag？
【发布时间】：2021-09-13 10:28:30
【问题描述】：

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

@nuxt/apollo 模块文档say 这是可选的，如果您想加载分离的.gql 文件（而不是...在组件中内联编写查询？）official Nuxt/Apollo demo 使用分离的.gql 文件尽管没有安装了 graphql-tag。

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

谁能准确告诉我 graphql-tag 的作用以及您是否（以及理论上如何）在未安装 Nuxt 的情况下使用 Apollo？

【问题讨论】：

标签： vue.js graphql nuxt.js apollo

【解决方案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 文件中有一些灵活的配置，他们使用 vanilla .js 文件和他们实际的 GQL 查询 + graphql-tag 的混合（如果不是 .gql 文件则需要）。

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

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

【讨论】：