reactjs - GraphQL Playground 返回数据，而应用程序返回 null

Question

我正在 React+TS/GraphQL/Prisma 中开发一个应用程序。该 API 是用 GraphQL 编写的，当我在 Playground 中运行特定查询时，我得到了预期的数据，但是当我在 React 中运行完全相同的查询时，我得到 null。为什么会这样？

我在查询中运行的内容(相关部分)

query {
  session {
    userData: {
      firstName
      lastName
      dateOfBirth 
    }
  }
}

并在 Playground 上返回

{
  "data": {
    "session": {
      "userData": {
        "firstName":"John",
        "lastName":"Doe",
        "dateOfBirth":null,
      }
    }
  }
}

但在应用程序中，当我控制台记录 userData 或 data.session 时，它会为整个对象返回 null。 console.log(data) 打印

session: {
  userData: null
}

有人知道为什么会这样吗？ Playground 准确地拉取用户数据并填充子字段，但在浏览器中的 App 上，它只返回“null”。

Answer 1

我发现了解决方案并想在这里分享。

问题的出现是因为我们正在处理一个包含更新数据的 session 。因此，用户创建一个 session ，然后更新，然后下一步更新更多内容，等等，然后最终提交 session 。

我的问题中描述的问题是基于 Apollo 默认为缓存优先，因为它的获取策略。因此，当用户更新时，下一步会查询 session 数据的未更新、缓存版本。

要解决此问题，在该过程的每个步骤中，我们需要调用查询并将获取策略设置为“仅网络”，如下所示:

const {loading, error, data} = useSessionQuery({fetchPolicy: 'network-only'});

这将确保从执行 updateMutation 的网络中提取数据，而不是从缓存的(过时的)副本中提取数据。