如何在vue.js中使用union上的片段？

Question

有没有人知道我怎么在工会上使用碎片？我已经看到了React的文档(https://www.apollographql.com/docs/React/advanced/fragments/#fragment-on-unions-and-interfaces)，但对Vue的介绍不多。我有一个返回两个片段的查询，都带有__TypeName。

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

当vue应用程序运行时，我收到一个错误：“您正在查询中使用片段，但要么在Apollo客户端中没有设置addTypeName：true选项，要么您正在尝试向存储中写入一个片段，但没有__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 }
}

我得到的错误消息是

• 您正在查询中使用片段，但在Apollo客户端中没有设置addTypeName：true选项，或者您正在尝试向存储中写入一个没有__TypeName的片段。请打开addTypename选项，并在写入片段时包含__TypeName，以便Apollo客户端能够准确匹配片段。
• 弃用警告：使用不带__TypeName的片段是不支持的行为，将在Apollo客户端的未来版本中删除。您现在应该修复此问题并将addTypename设置为true。
• GraphQL错误：Professor上的片段不能在查询内部传播；GraphQL错误：过程中的片段不能在查询中传播；GraphQL错误：搜索声明了变量$QueryString，但未使用
• GraphQL错误：Professor上的片段不能在查询内部传播；GraphQL错误：过程中的片段不能在查询中传播；GraphQL错误：搜索声明了变量$QueryString，但未使用

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

Answer 1

您的查询不正确。您将操作命名为search，但您可能是想在根类型上查询该字段。类似于：

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

注意：因为我不知道您的模式，所以我也不能肯定上面的查询是有效的。如果您要查询的服务器公开了GraphiQL或GraphQL Playground接口，您应该使用它来验证您的查询，因为这两个工具都使用模式特定的语法高亮显示。

您可能希望为每个片段添加id或_id字段，以确保正确的缓存行为。如果这两个字段都不存在，则需要提供自定义的DataidFromObject函数。有关更多细节，请参阅文档。