无法在单个 GraphQL 查询中组合本地和远程数据（Next.js + Apollo）

Question

设置：

我的基本设置是从 GraphQL API 查询数据的 Next.js 应用。

我正在从 API 获取一个对象数组，并且能够在客户端上显示该数组。

我希望能够根据 API 架构中定义的枚举值过滤数据。我能够以编程方式传递这些值，并且数据已正确更新。

我希望这些过滤器在用户离开页面并返回时保持不变。我最初打算使用 Redux，但后来我读到了 apollo-link-state 以及将本地（客户端）状态存储到 Apollo 存储中的能力，所以我开始使用它。到目前为止，一切顺利。

问题：

当我尝试将本地查询和远程查询合并为一个时，出现以下错误：networkError: TypeError: Cannot read property 'some' of undefined

我的查询如下所示：

const GET_COMBINED = gql`
  {
    items {
      id
      details
    }
    filters @client
  }
`

我在这样的组件中使用它：

export default const Items = () => (
  <Query query={GET_COMBINED}>
    {({ loading, error, data: { items, filters } }) => {
      ...do stuff...
    }}
  </Query>
)

如果，我单独运行查询，如下所示：

const GET_ITEMS = gql`
  {
    items {
      id
      details
    }
  }
`
const GET_FILTERS = gql`
  {
    filters @client
  }
`

并将查询嵌套在组件内：

export default const Items = () => (
  <Query query={GET_ITEMS}>
    {({ loading, error, data: { items } }) => {
      return (
        <Query query={GET_FILTERS}>
          {({ data: { filters } }) => {
            ...do stuff...
          }}
        </Query>
      )
    }}
  </Query>
)

然后它按预期工作！

但是，当单个查询（至少在理论上）可以完成这项工作时，像这样嵌套查询似乎远非最佳。而且我真的不明白为什么组合查询不起作用。

我已经将我的应用程序剥离到它的基本框架以试图理解，但它的要点是，每当我尝试将获取本地和远程数据合并到一个查询中时，它都会惨遭失败，而在孤立的情况下两者都可以正常工作.

问题是否来自 SSR/Next？我做错了吗？提前感谢您的帮助！

编辑 2 - 其他详细信息

该错误是由 react-apollo 的 getDataFromTree 触发的，但是即使我在 SSR 期间选择跳过查询（通过将 ssr: false 属性传递给 Query 组件），组合查询仍然失败。此外，远程和本地查询在单独运行时都在服务器端工作。我很困惑。

我已经根据 NextJS 的 with-apollo 示例整理了一个小型 repo，该示例在此处重现了该问题：https://github.com/jaxxeh/next-with-apollo-local

应用运行后，直接点击Posts (combined)链接会触发错误，而Posts (split)链接会按预期显示数据。

加载数据后，Posts (combined) 将显示数据，但尝试加载额外数据将触发错误。重新加载（即服务器渲染）页面也会触发错误。复选框将起作用，并且它们的状态会在整个应用中保留。

Posts (split) 页面将完全按预期运行。您可以加载额外的帖子数据、重新加载页面和设置复选框。

因此，组合查询显然存在问题，无论是在服务器端（重新加载错误）还是客户端（无法显示其他帖子）。但是，直接写入本地状态（完全绕过查询）确实有效。

为了简洁明了，我删除了 Apollo 初始化代码，它可以在上面链接的 repo 中找到。谢谢。

Answer 1

添加一个空对象作为解析器映射到您传递给withClientState 的配置：

const stateLink = withClientState({
  cache,
  defaults: {
    filters: ['A', 'B', 'C', 'D']
  },
  resolvers: {},
  typedefs: `
    type Query {
      filters: [String!]!
    }
  `,
})

有一个相关问题here。如果缺少选项或文档更清楚，构造函数会抛出某种错误，那就太好了。