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

有人知道如何在联合体上使用碎片吗？我看过React（）的文档，但在Vue上看得不多。我有一个查询，返回两个片段，都带有uuu typename

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

当vue应用程序运行时，我收到错误“您在查询中使用片段，但Apollo Client中未设置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'
                }
          }
    }
},

我收到的错误消息是

• 您正在查询中使用片段，但要么没有addTypename： 在Apollo客户端中设置了true选项，或者您正试图在没有_类型名的情况下将片段写入存储。 请打开addTypename选项，并在编写片段时包含_uTypeName，以便Apollo客户端 能够准确地匹配片段
• 不推荐使用警告：使用不带_typename的片段是不受支持的行为，将在Apollo客户端的未来版本中删除。您现在应该修复此问题并将addTypename设置为true
• GraphQL错误：Professor上的片段无法在查询中传播；GraphQL错误：进程上的片段不能在查询中传播；GraphQL错误：变量$queryString由搜索声明，但未使用
• GraphQL错误：Professor上的片段无法在查询中传播；GraphQL错误：进程上的片段不能在查询中传播；GraphQL错误：变量$queryString由搜索声明，但未使用

---

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

您的查询不正确。您已将您的操作命名为

search

，但您可能想在根类型上查询此字段。比如：

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

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

---

您可能希望向每个片段添加一个

id

或

\u id

字段，以确保正确的缓存行为。如果两个字段都不存在，则需要提供自定义的

dataIdFromObject

函数。有关更多详细信息，请参阅。

您的查询不正确。您已将您的操作命名为

search

，但您可能想在根类型上查询此字段。比如：

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

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

---

您可能希望向每个片段添加一个

id

或

\u id

字段，以确保正确的缓存行为。如果两个字段都不存在，则需要提供自定义的

dataIdFromObject

函数。有关更多详细信息，请参见。

Apollo自动添加

\uuu typename

（

addTypename

默认为

true

）。无需向查询中显式添加

\uuuu typename

，也无需设置选项。有趣。。解决这个问题后，我可以从配置中删除选项，从查询中删除_typename，而不会弹出错误。这很奇怪。难怪我在网上找不到任何东西。再次感谢你！阿波罗自动添加

\uuu typename

（

addTypename

默认为

true

）。无需向查询中显式添加

\uuuu typename

，也无需设置选项。有趣。。解决这个问题后，我可以从配置中删除选项，从查询中删除_typename，而不会弹出错误。这很奇怪。难怪我在网上找不到任何东西。再次感谢你！感谢您不仅提供了一个解决方案，而且还提供了一个返回ID的建议！即使没有架构，您的查询也很准确。感谢您不仅提供了解决方案，而且还提供了返回ID的建议！即使没有架构，您的查询也很准确。