更新Apollo GraphQL缓存而不使用refetchQueries? [英] Update Apollo GraphQL cache without using refetchQueries?

问题描述

我有一个React应用程序通过Apollo Client(版本1.x)访问GraphQL服务器.有一个看起来像这样的服务器架构.

I have a React app accessing GraphQL server with the Apollo Client (version 1.x). There is a server schema that looks like this.

type Query {
  currentShop: Shop
}
type Shop {
  id: ID!
  name: String!
  products: [Product!]!
  ...etc
}

我确实有这样定义的dataIdFromObject.

const dataIdFromObject = o => {
  if (o.__typename != null && o.id != null) {
    return `${o.__typename}-${o.id}`
  }
  return null
}

在整个应用程序中，我正在运行查询，要求输入currentShop的不同字段.在各个点上，还有一些突变会改变currentShop，并且该突变总是返回结果Shop类型.但是，与currentShop没有关系，因此Apollo无法知道如何更新根查询缓存指针.

Throughout the app, I am running queries asking for different fields of currentShop. At various points there are also mutations that are changing the currentShop and the mutation is always returning resulting Shop type. However, there is no relation to the currentShop so Apollo cannot know how to update root query cache pointer.

我已经使用 CodeSandbox .后端是通过 Apollo LaunchPad 制成的.选择一个不同的分支，等待几秒钟(不必担心优化)，并且可以正常工作.

I've made fully working demo representing the issue with CodeSandbox. The backend is made with Apollo LaunchPad. Picking a different branch, waiting couple seconds (did not bother with optimizations) and it works.

ShopSelectButton组件中发生魔术".如果您注释掉refetchQueries行，那么事情就坏了.在服务器上正确选择了商店(您在重新加载后会看到它)，但是客户端的行为就像死动物一样.

The "magic" is happening in the ShopSelectButton component. If you comment out refetchQueries line, things get broken. The shop is correctly selected on the server (and you see it after reload), but client acts like a dead animal.

我的问题出在refetchQueries上，因为它会使代码耦合得太紧.我不想在应用程序的一部分中包含某个组件来了解任何其他组件及其需求.坦白地说，重新获取意味着它可以进行整个缓存，并且始终从后端读取数据，这在大多数情况下是不必要的.

My problem is with refetchQueries as it makes code too tightly couple. I don't want to have a component in one part of the app to know about any other component and their needs. Also honestly, refetching means it goes around whole caching and it always reads from backend which is unnecessary in most cases.

我想知道还有什么其他方法可以做到这一点.应该建立更无状态的架构，而是将状态保留在前端应用程序中吗?

I am wondering what are other approaches to this. Should the schema be built more stateless and keep the state in the frontend app instead?

推荐答案

我认为该突变应该有效而无需重新获取查询.您只需要将相关查询中的所有必需数据添加到变异结果主体中即可.

I think the mutation should work without refetching the queries. You just need to add all the required data from the related queries in the mutation result body.

您是否尝试安装适用于chrome的apollo客户端开发工具扩展程序?在这里，您可以轻松地看到不同查询中的currentShop元素是否通过类型名和ID与商店类型相关联. 如果是这种情况，阿波罗应该在突变后更新.

Did you try to install the apollo client development tool extension for chrome? There you could easily see if the currentShop element in the different queries is related via the typename and id to a Shop type. If this is the case apollo should update after the mutation.

要获取所有必要的数据以正确更新突变结果，建议您将片段结构添加到您的应用中.这意味着需要车间数据的所有组件都具有一个片段字段，用于定义需求. 收集片段并将其添加到突变体中.当然，这样做在其他组件和突变之间具有相同的耦合.

To get all required data for the mutation result to update correctly i suggest you add a fragments structure to your app. Meaning that all components which need data from the shop have a fragments field defining the requirements. The fragments are collected and added to the mutation body. Of course doing this you have the same coupling between the other components and the mutation.

另一种选择是将Shop类型的所有可能数据添加到突变结果中.

Another option would be to add all possible data of the Shop type to the result of the mutation.

这篇关于更新Apollo GraphQL缓存而不使用refetchQueries?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！