无法在 GraphQL Apollo 客户端中读取属性查询答案

【问题标题】：Cannot read proper query in GraphQL Apollo Client无法在 GraphQL Apollo 客户端中读取属性查询
【发布时间】：2019-10-22 22:15:12
【问题描述】：

在我的应用程序的一个页面上，我正在使用 graphql apollo 客户端进行两次 api 调用。一个是document，另一个是menu。我的一个组件中需要菜单数据，所以我想使用readQuery 以免再次获取它。我正在做的是：

const client = useApolloClient();

  try {
const testData = client.readQuery({
  query: gql`
  query ($result: String) {
    menu(result:  $result) {
      text
    }
  }
`,
  variables: {
    result: „testresult”
  },
});
console.log(testData);
} catch(e) {
  console.log(e);
}

graphQL 正在寻找 document 根查询，因此错误如下所示：

Invariant Violation: Can't find field menu({"lang":"en-us"}) on object 

{
  "document({\"lanf\":\"en-us\",\"id\":\"mySite\"})": {
    "type": "id",
    "generated": false,
    "id": "XO5tyxAAALGzcYGG",
    "typename": "Document"
  }
}.

我认为是因为菜单数据还没有。

我怎么能等到它出现呢？

【问题讨论】：

标签： reactjs graphql react-apollo react-apollo-hooks

【解决方案1】：

你是对的。您收到错误消息，因为数据尚未在缓存中：

另一方面，如果适当的数据不在您的缓存中，则查询方法可能会向您的服务器发送请求，而如果数据不在您的缓存中，则 readQuery 将引发错误。 readQuery 将始终从缓存中读取。

https://www.apollographql.com/docs/react/advanced/caching/#readquery

要执行您想要的操作，请使用带有cache-only fetchPolicy 的普通查询。 https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy

【讨论】：

但这不会也抛出错误吗？来自文档：如果缓存中不存在您查询的数据，则会引发错误
所以我想cache-first 在这里会更合适。感谢您的帮助并走上正轨
不，它不会抛出错误。使用 useQuery 时，如果没有数据，仅此而已。您必须处理 ui 中的无数据情况。 fetchPolicy cache-first 是默认行为。 Apollo 将查看缓存，如果没有数据，它将发出请求。否则不行。因此，要使用 cache-first，只需像往常一样使用 useQuery。