为什么需要 graphql-tag 将 Apollo 与 Nuxt 结合使用？

如何解决为什么需要 graphql-tag 将 Apollo 与 Nuxt 结合使用？

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

@nuxt/apollo 模块文档 say 这是可选的，如果你想加载分离的 .gql 文件（而不是......在你的组件中编写你的内联查询？）和 {尽管未安装了 graphql-tag，{3}} 仍使用分隔的 .gql 文件。

我已阅读 official Nuxt/Apollo demo，但它似乎并没有真正回答我的问题。它只是谈论查询解析。

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

解决方法

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

<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

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