如何在 Vue.js 中使用联合片段？

Question

有谁知道如何在联合上使用片段？我看过 React (https://www.apollographql.com/docs/react/advanced/fragments/#fragments-on-unions-and-interfaces) 的文档，但 Vue 的文档不多。我有一个查询 returns 两个片段，都带有 __typename.

query {
    search(queryString: "lin") {
        ... on Professor {
            __typename
            name
        }
        ... on Course { 
            __typename
            name
            moduleCode
        }
    }
}

当 vue 应用程序运行时，我收到错误消息"You're using fragments in your queries, but either don't have the addTypename: true option set in Apollo Client, or you are trying to write a fragment to the store without the __typename."这是我的 vue 应用程序的代码。

data() {
    return {
        result: []
    };
},
apollo: {
    // Query with parameters
    result: {
        // gql query
            query: gql'
                query search($queryString: String!) {
                    ... on Professor {
                        __typename
                        name
                    }
                    ... on Course { 
                        __typename
                        name
                        moduleCode
                    }
                }
            ',
            // Static parameters
            variables() {
               return {
                  queryString: 'lin mei'
                }
          }
    }
},

// In my apollo client options
// Override default cache
cache: new InMemoryCache(
    { addTypename: true }
}

我收到的错误信息是

您在查询中使用了片段，但都没有 addTypename：在 Apollo Client 中设置了 true 选项，或者您试图在没有 __typename 的情况下将片段写入商店。请开启 addTypename 选项，并在编写片段时包含 __typename 以便 Apollo Client 可以准确匹配片段
弃用警告：使用不带 __typename 的片段是不受支持的行为，将在 Apollo 客户端的未来版本中删除。您现在应该修复此问题并将 addTypename 设置为 true。
GraphQL 错误：Professor 上的片段无法在 Query 中传播； GraphQL 错误：Fragment on Course can't be spread inside Query; GraphQL 错误：搜索声明了变量 $queryString 但未使用
GraphQL 错误：Professor 上的片段无法在 Query 中传播； GraphQL 错误：Fragment on Course can't be spread inside Query; GraphQL 错误：搜索声明了变量 $queryString 但未使用

有没有人能提供一个从 vue 中的查询中抓取两个片段的例子？

Answer 1

您的查询不正确。您已将您的操作命名为 search，但您可能打算改为在根类型上查询此字段。类似于：

query ($queryString: String!) {
  search(queryString: $queryString) {
    ... on Professor {
      __typename
      name
    }
    ... on Course { 
      __typename
      name
      moduleCode
    }
  }
}

注意：因为我不知道您的架构，所以我也不能肯定上面的查询是有效的。如果您查询的服务器公开了 GraphiQL 或 GraphQL Playground 接口，您应该使用它来验证您的查询，因为这两种工具都使用 schema-specific 语法突出显示。

您可能希望向每个片段添加一个 id 或 _id 字段以确保正确的缓存行为。如果两个字段都不存在，您将需要提供自定义 dataIdFromObject 函数。有关更多详细信息，请参阅 the docs。

如何在 Vue.js 中使用联合片段？

How do I use fragments on union in Vue.js?

vue.js

graphql

vue-apollo