reactjs - Apollo 缓存 - 缺少为查询字段名称返回的类型 undefined object 的选择集

Question

我正在使用 apollo-boost 构建一个应用程序，其中应该已经包含一些使用 graphql 制作 React 应用程序的软件包。

当我想将数据存储到 Apollo 缓存中时，我遇到了错误。

ApolloClient.tsx

import ApolloClient from 'apollo-boost'
import { InMemoryCache } from 'apollo-cache-inmemory'

import { secretToken } from './secretToken'

const cache = new InMemoryCache({
})

const client = new ApolloClient({
  uri: 'https://someUrlIremovedForTheQuestion.com',
  request: async operation => {
    operation.setContext({
      headers: {
        Authorization: secretToken
      }
    })
  },
  cache
})

client.writeData({
  data: {
    names: [
      {
        firstName: 'Mario'
      },
      {
        firstName: 'Luigi'
      }
    ]
  }
})
export default client

现在我尝试访问我在同一个 apollo 配置中创建的这些名称:

MyComponent.tsx

const result = client.readQuery({ query: gql`
      query namesCached {
        names @client
      }`
    })
console.log(result)

这总是陷入这个错误:

查询字段名称返回的类型为 undefined object 缺少选择集

如果我正在处理单个数据，例如 name: 'Mario'，它可以完美地工作并检索该数据，但对于更深的对象或数组，它总是会失败并出现此错误。

我也在使用 Typescript

知道会是什么吗？ Stack Overflow 向我展示了一些不起作用的答案，而 GitHub 也没有为我提供解决方案......

编辑所以这是我的真实例子，使其更接近我的实际问题:

<Query
    query={fetchdata}
    onCompleted={({ repository }) => client.writeData({
        data: {
          issues: repository.issues.edges
        }
      })
    }
  >

基本上我正在执行一个查询，一旦完成，我想将其存储在缓存中，因为我多次检查它以比较和过滤一些结果。

我只尝试使用存储库，但仍然出现相同的错误

要检索数据，我正在执行与上面相同的操作，但使用 issues 而不是 names

Answer 1

文档可以更好地强调这一点，但存储在缓存中的对象应该始终具有适当的__typename。此外，如果您要在缓存中存储多个相同类型的对象，则应包含 id 属性以确保为每个项目生成唯一的缓存键。换句话说，你的初始状态应该是:

names: [
  {
    __typename: 'Name',
    id: 0,
    firstName: 'Mario',
  },
  {
    __typename: 'Name',
    id: 1,
    firstName: 'Luigi'
  }
]

然后您可以像这样查询状态:

query namesCached {
  names @client {
    firstName
  }
}

不过值得一提的是，除非您要存储对象，否则上述内容不是必需的。如果您使用标量，如下所示:

names: [
  'Mario',
  'Luigi',
]

那么您不需要选择集:

query namesCached {
  names @client
}