在具有“合并”功能的 apollo 客户端分页配置中，即使在调用 fetchMore 后，现有缓存数据也始终为空

问题描述

我是 Apollo Client 的新手，我正在尝试为我的产品列表实现分页。但我不明白为什么 merge 函数中的 existing 参数总是返回空。每次我调用 fetchMore 时，我的 传入 参数总是用新列表更新，但现有参数始终为空这就是 我无法将新列表与旧列表合并的原因。

这是我的客户端配置：

/* eslint-disable @typescript-eslint/no-unsafe-return */
import { ApolloClient,InMemoryCache } from '@apollo/client'
import { AppEndpoints } from './const'
import { createLink } from './links'


const cache = new InMemoryCache({
  typePolicies: {
    ListProductSearchType: {
      fields: {
        items: {
          keyArgs: false,// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
          merge: (existing = [],incoming,{ args }) => {
            console.log('>>>args',args)
            console.log('>>>existing',existing) // it's always empty
            console.log('>>>incoming',incoming)

            return [...existing,...incoming]
            
          },},})

const link = createLink(AppEndpoints.main)

const client = new ApolloClient({
  cache,// ssrMode: false,link,defaultOptions: {
    mutate: {
      errorPolicy: 'ignore',query: {
      fetchPolicy: 'cache-first',})

export default client

这是我的 Graphql 回复：

{
  "data": {
    "productSearch": {
      "listDto": {
        "count": 10,"items": [
          {
            "id": "1d37d4fe-79d9-440a-8869-2dca0327791b","code": "780133 Iceland Poppy","isMyfavorite": false,"currency": "$","imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg","price": 429.29,"compareAtPrice": 240.4,"hasdiscount": true,"visited": 27685,"salesCount": 8148,"createdDateTime": "2020-12-14T06:02:38.0469339+00:00","__typename": "ProductSearchDto"
          },{
            "id": "ae15c925-75ef-4dde-aa07-0eeb1bbb75c8","code": "330338 Amaranth","price": 234.8,"compareAtPrice": 211.32,"visited": 27660,"salesCount": 6374,"createdDateTime": "2020-12-05T15:04:37.4237772+00:00",{
            "id": "de23a1f8-5e79-4cf9-88f0-57518c42a82c","code": "690156 SNowflake","price": 110.11,"compareAtPrice": 88.09,"visited": 27141,"salesCount": 2278,"createdDateTime": "2020-10-18T11:27:38.0467775+00:00",{
            "id": "fb298a9c-a3d7-4c0e-a96e-a552b98d340f","code": "375033 Peony","price": 337.68,"compareAtPrice": 151.96,"visited": 27050,"salesCount": 2483,"createdDateTime": "2020-12-06T22:57:37.4236274+00:00",{
            "id": "d017638f-3062-49bf-99cc-0e06ba0882b9","code": "112093 Hyacinth,wild","price": 460.43,"compareAtPrice": 326.91,"visited": 26843,"salesCount": 530,"createdDateTime": "2020-11-10T23:13:37.4235865+00:00",{
            "id": "682a3c04-a462-4cbd-be8f-8b65d024b73f","code": "914276 Iceland Poppy","price": 126.81,"compareAtPrice": 100.18,"visited": 24055,"salesCount": 6328,"createdDateTime": "2021-01-05T11:05:38.0469862+00:00",{
            "id": "c48819e2-52f4-4324-9f11-616efbc1a744","code": "494847 Persian Candytuft","price": 405.95,"compareAtPrice": 288.22,"visited": 23713,"salesCount": 7474,"createdDateTime": "2020-10-23T16:24:37.4236199+00:00",{
            "id": "7118ddd5-56cf-4e12-9665-accb5abf3f73","code": "682251 Violet","price": 184.09,"compareAtPrice": 90.2,"visited": 23448,"salesCount": 6196,"createdDateTime": "2020-10-12T08:36:38.0469107+00:00",{
            "id": "9e69b51a-560e-4d5e-b956-d9438d996c61","code": "982376 Calendula","price": 62.25,"compareAtPrice": 38.6,"visited": 23300,"salesCount": 9072,"createdDateTime": "2020-10-10T14:24:38.0463778+00:00",{
            "id": "623dde57-8daf-4637-b2d3-0ebbf166aad0","code": "138453 Manchineel","price": 121.92,"compareAtPrice": 56.08,"visited": 22373,"salesCount": 4735,"createdDateTime": "2020-10-11T12:04:37.4235489+00:00","__typename": "ProductSearchDto"
          }
        ],"__typename": "ListProductSearchType"
      },"__typename": "GenericQueryResponseProductSearchType"
    }
  }
}

这是我的查询：

export const GetProductSearchDocument = /*#__PURE__*/ gql`
    query GetProductSearch($filter: GenericFilterRequestProductSearchReqInputType!) {
  productSearch(filter: $filter) {
    listDto {
      count
      items {
        id
        code
        isMyfavorite
        currency
        imageUrl
        price
        compareAtPrice
        hasdiscount
        visited
        salesCount
        createdDateTime
      }
    }
  }
}

我正在像这样调用 fetchMore：

 const [pageIndex,setpageIndex] = useState(0)
  const { productResults,loading,fetchMore } = useQueryProductSearchData()
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { formatMessage } = useIntl()

  useEffect(() => {
    if (pageIndex !== 0) {
      fetchMore({
        variables: {
          filter: {
            pageSize: 10,pageIndex,dto: {
              filters: [],})
    }
  },[fetchMore,pageIndex])

  const onViewMore = () => {
    setpageIndex((pre: any) => pre + 1)
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）