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

Question

设置：

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

我正在从 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 属性传递给查询组件），组合查询仍然失败。此外，当运行时，远程和本地查询都在服务器端工作。我很纳闷。

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

应用程序运行ning 后，直接单击 Posts (combined) link 将触发错误，而 Posts (split) link 将显示数据符合预期。

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

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

因此，组合查询显然存在问题，无论是在服务器端（重新加载时出错）还是在客户端（无法显示额外的 posts）。然而，直接写入本地状态（完全绕过查询）确实有效。

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

Answer 1

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

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

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

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

Unable to combine local and remote data in a single GraphQL query (Next.js + Apollo)

apollo

graphql

react-apollo

next.js

apollo-client