Apollo 返回的数据错误，但在网络检查器中是正确的

Question

我有一个 React/Apollo 应用程序，它总是让我的数据出现乱码和错误。数据在网络检查器中看起来是正确的，但是当 Apollo 返回它时，它会改变它。

返回的记录应类似于：

{
  id: 12345,
  name: 'some record',
  status: { id: 1, name: 'Active' }
  types: [
    { id: 1, name: 'Client' },
    { id: 4, name: 'Example' }
  ],
  // ... more props
}

当我在 Chrome 的网络检查器中查看原始响应时，它们确实看起来像这样。

Apollo 返回的记录是这样的：

{
  id: 12345,
  name: 'some record',
  status: { id: 1, name: 'Client' } // <-- The word "Active" gets changed to "Client"
  types: [
    { id: 1, name: 'Client' },
    { id: 4, name: 'Example' }
  ],
  // ... more props
}

我认为 Apollo 正在尝试“缓存”记录或其他东西，并且它假设状态 ID 和类型 ID 是相同的。因此它看到 status.id 为 1，因此它假设这与类型 ID 1 相同。

如何关闭 Apollo 所有花哨愚蠢的“功能”？

编辑：截图

这是从控制台打印的原始数据，我的

useQuery

钩子数据的console.log：

这是我在网络检查器中看到的原始输出：

除了阿波罗做了一些奇怪的内部逻辑之外，我无法解释为什么这些结果不同。响应中的字面意思是正确的，但是一旦 Apollo 将其返回给我，情况就不同了。

我的代码：

const { data, refetch } = useQuery(gql`
    query GetScoreAudit(
      $page: Int, $pageSize: Int, $search: String,
      $orderBy: String, $order: Order,
      $status: Int, $type: Int
    ) {
      scoreAudit(
        page: $page, pageSize: $pageSize, search: $search,
        orderBy: $orderBy, order: $order,
        status: $status, type: $type
      ) {
        total
        nodes {
          id
          name
          managedWorkstations
          managedServers
          firewall
          wpsCompliance
          maxWpsCompliance
          mrr
          tpe
          status {
            id
            name
          }
          types {
            id
            name
          }
          serviceCompanies {
            service
            exists
          }
        }
      }
    }
  `, {
    variables: {
      page: tableOpts.pagination.page,
      pageSize: tableOpts.pagination.pageSize,
      search: tableOpts.filters.search,
      orderBy: tableOpts.orderBy,
      order: tableOpts.order,
      status: tableOpts.filters.status,
      type: tableOpts.filters.type
    }
  });

  console.log(data);

字符串化输出数据：

Answer 1

这是 Apollo 客户端的规范化缓存 - 您可以（并且可能应该）在文档中阅读更多相关信息。

一般情况下：如果Apollo Client遇到两个

__typename:id

组合相同的对象，就会认为它们是“同一个对象”，将它们存储在同一个地方，然后将它们合并在一起。

因此，在您的情况下，这两个项目都有“内部 id”

CWBaseRecord:1

- 您可以做的最好的事情是确保您的服务器实际上为不属于该项目的事物返回不同的 id/类型组合。一样。

如果您无法做到这一点，您可以为

CWBaseRecord

添加类型策略，声明它们不应标准化：

      const client = new ApolloClient({
        // ...
        cache: new InMemoryCache({
          typePolicies: {
            CWBaseRecord: {
              keyFields: false,
            },
          },
        }),
      });