0

有谁知道我如何在工会上使用片段？我已经看过 React 的文档（https://www.apollographql.com/docs/react/advanced/fragments/#fragments-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 选项，并在编写 Fragment 时包含 __typename，以便 Apollo Client 准确匹配 Fragment。
  • 弃用警告：使用不带 __typename 的片段是不受支持的行为，将在未来版本的 Apollo 客户端中删除。您现在应该修复此问题并将 addTypename 设置为 true。
  • GraphQL 错误：Professor 上的 Fragment 无法在 Query 中传播；GraphQL 错误：Fragment on Course 不能在 Query 中传播；GraphQL 错误：变量 $queryString 由搜索声明但未使用
  • GraphQL 错误：Professor 上的 Fragment 无法在 Query 中传播；GraphQL 错误：Fragment on Course 不能在 Query 中传播；GraphQL 错误：变量 $queryString 由搜索声明但未使用

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

4

1 回答 1

2

您的查询不正确。您已将 operation 命名为search，但您可能打算改为在根类型上查询此字段。就像是：

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

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

您可能希望为每个片段添加一个idor_id字段以确保正确的缓存行为。如果两个字段都不存在，则需要提供自定义dataIdFromObject函数。有关其他详细信息，请参阅文档。

于 2019-06-22T15:52:35.497 回答