我有一个React/Apollo应用程序,它总是让我的数据混乱和错误.数据在网络判断器中看起来是正确的,但当阿波罗返回时,它会改变它.

返回的记录应该是这样的:

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

当我在Chrome中查看网络判断器中的原始响应时,它们确实是这样的.

阿波罗返回的记录是这样的:

{
  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是相同的.所以它看到www.example.com是1,所以它假设这与类型ID是1相同的.

我怎么才能关掉阿波罗所有的花哨愚蠢的"功能"?

编辑:屏幕截图

This is the raw data printed from the console, the console.log of my useQuery hook data: enter image description here

This is the raw output that I see in the Network inspector: enter image description here

我没有解释为什么这些出来不同除了阿波罗做一些奇怪的内部逻辑.回答是正确的,但阿波罗一把还给我就不一样了.

我的代码:

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);

Stringified output data: enter image description here

推荐答案

这是Apollo Client的规范化缓存—您可以(而且可能应该)read more about it in the documentation.

一般来说:如果Apollo客户端遇到两个__typename:id的组合相同的对象,它会认为它们是"相同的对象",将它们存储在相同的位置,并将它们合并在一起.

因此,在您的例子中,这两个项目都有"internal id"CWBaseRecord:1best,您可以做的事情是确保您的服务器实际上返回不同的id/type组合,用于不同的项目.

如果你不能这样做,你可以为CWBaseRecord添加一个类型策略,声明它们不应该被规范化:

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

Javascript相关问答推荐

React:未调用useState变量在调试器的事件处理程序中不可用

将json数组项转换为js中的扁平

我试图实现用户验证的reduxstore 和操作中出了什么问题?

从WooCommerce Checkout Country字段重新排序国家,保持国家同步

Angular 17—每当一个布尔变量变为真时触发循环轮询,只要它保持为真

使用JQuery单击元素从新弹出窗口获取值

Angular 中的类型错误上不存在获取属性

连接到游戏的玩家不会在浏览器在线游戏中呈现

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

在表单集中保存更改时删除';禁用';

如何组合Multer上传?

本地损坏的Java脚本

在HTML5画布上下文中使用putImageData时,重载解析失败

为什么我的SoupRequest";被重置为初始值,以及如何修复它?

计算对象数组中属性的滚动增量

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

如何在函数组件中保留对计时器的引用

从客户端更新MongoDB数据库

CSS网格使页面自动滚动

如何在底部重叠多个div?