为啥将 Apollo 与 Nuxt 一起使用需要 graphql-tag？

Posted 2023-03-10

【中文标题】为啥将 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？

【参考方案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 中了解到的东西。