定义自定义合并函数以解决 GraphQL 中的 InMemoryCache 合并

Question

我收到警告：

Cache data may be lost when replacing the parts field of a Query object.

To address this problem (which is not a bug in Apollo Client), define a custom merge function for the Query.parts field, so InMemoryCache can safely merge these objects:

  existing: [{"__ref":"Part:53"},{"__ref":"Part:55"},{"__ref":"Part:56"},{"__ref":"Part:57"},{"__ref":"Part:58"}]
  incoming: [{"__ref":"Part:53"},{"__ref":"Part:55"},{"__ref":"Part:56"},{"__ref":"Part:57"}]

现在这是我的零件类型：

type Part {
  id: ID!
  created_at: DateTime!
  updated_at: DateTime!
  partName: String
  partDescription: String
  partQuantity: Long
  usePercentage: Boolean
  partPercentage: Float
  type: String
  published_at: DateTime
  products(sort: String, limit: Int, start: Int, where: JSON): [Product]
  partImage(sort: String, limit: Int, start: Int, where: JSON): [UploadFile]
  stockevents(sort: String, limit: Int, start: Int, where: JSON): [Stockevent]
}

此警告在我使用突变删除一个部分来删除一个部分后触发。这是：

const [partDelete] = useMutation(DELETE_PART, {
        update(cache, { data }) {
            const newData = Object.values(data)
            const refresh = newData.map(name => name.part)
            const refined = refresh.map(item => item.id)
            cache.evict({
                id: cache.identify({
                    id: refined.id
                })
            })
            cache.writeQuery({
                query: GET_PARTS
            })
        },
        refetchQueries: [
          { query: GET_PARTS }
        ]
    })

我在单独的函数中传递负载，一切正常，但我不断收到此缓存警告，所以我想现在处理它。

我已经在 index.js 中更新了 InMemoryCache，但它仍然不起作用：

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache({
    typePolicies: {
      Part: {
          merge(existing = [], incoming = []) {
            return [...existing, ...incoming];
          }
      }
    }
  })
});

我也试过 return 仅...传入但没有发生任何不同。

提前致谢，干杯！

Answer 1

问题出在 InMemoryCache 配置的结构中。在我把它改成这个之后它起作用了：

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        Part: {
          parts: {
            fields: {
              merge(existing, incoming) {
                return incoming;
              }
            }
          }
        }
      }
    }
  })
});

我还从包含逐出和修改的突变中删除了更新选项。

Answer 2

当您看到此警告时：

To address this problem (which is not a bug in Apollo Client), define a custom merge function for the Query.your_query_name field, so InMemoryCache can safely merge these objects:

试试这个缩短：

const client = new ApolloClient({
  uri: "your_API_link",
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          your_Query_Name: {
            merge: (existing = [], incoming) => {
              return incoming;
            },
          },
        },
      },
    },
  }),
});

定义自定义合并函数以解决 GraphQL 中的 InMemoryCache 合并

Defining custom merge function to resolve InMemoryCache merge in GraphQL

javascript

apollo

reactjs

graphql

apollo-client