pagination - 在具有 "merge"函数的 apollo 客户端分页配置中，即使在调用 fetchMore 之后，现有缓存数据始终为空

Question

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

这是我的客户端配置:

/* 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",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 234.8,
            "compareAtPrice": 211.32,
            "hasDiscount": true,
            "visited": 27660,
            "salesCount": 6374,
            "createdDateTime": "2020-12-05T15:04:37.4237772+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "de23a1f8-5e79-4cf9-88f0-57518c42a82c",
            "code": "690156 Snowflake",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 110.11,
            "compareAtPrice": 88.09,
            "hasDiscount": true,
            "visited": 27141,
            "salesCount": 2278,
            "createdDateTime": "2020-10-18T11:27:38.0467775+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "fb298a9c-a3d7-4c0e-a96e-a552b98d340f",
            "code": "375033 Peony",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 337.68,
            "compareAtPrice": 151.96,
            "hasDiscount": true,
            "visited": 27050,
            "salesCount": 2483,
            "createdDateTime": "2020-12-06T22:57:37.4236274+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "d017638f-3062-49bf-99cc-0e06ba0882b9",
            "code": "112093 Hyacinth, wild",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 460.43,
            "compareAtPrice": 326.91,
            "hasDiscount": true,
            "visited": 26843,
            "salesCount": 530,
            "createdDateTime": "2020-11-10T23:13:37.4235865+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "682a3c04-a462-4cbd-be8f-8b65d024b73f",
            "code": "914276 Iceland Poppy",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 126.81,
            "compareAtPrice": 100.18,
            "hasDiscount": true,
            "visited": 24055,
            "salesCount": 6328,
            "createdDateTime": "2021-01-05T11:05:38.0469862+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "c48819e2-52f4-4324-9f11-616efbc1a744",
            "code": "494847 Persian Candytuft",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 405.95,
            "compareAtPrice": 288.22,
            "hasDiscount": true,
            "visited": 23713,
            "salesCount": 7474,
            "createdDateTime": "2020-10-23T16:24:37.4236199+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "7118ddd5-56cf-4e12-9665-accb5abf3f73",
            "code": "682251 Violet",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 184.09,
            "compareAtPrice": 90.2,
            "hasDiscount": true,
            "visited": 23448,
            "salesCount": 6196,
            "createdDateTime": "2020-10-12T08:36:38.0469107+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "9e69b51a-560e-4d5e-b956-d9438d996c61",
            "code": "982376 Calendula",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 62.25,
            "compareAtPrice": 38.6,
            "hasDiscount": true,
            "visited": 23300,
            "salesCount": 9072,
            "createdDateTime": "2020-10-10T14:24:38.0463778+00:00",
            "__typename": "ProductSearchDto"
          },
          {
            "id": "623dde57-8daf-4637-b2d3-0ebbf166aad0",
            "code": "138453 Manchineel",
            "isMyfavorite": false,
            "currency": "$",
            "imageUrl": "https://devcdn.sonbol.nl/Product/flower.jpg",
            "price": 121.92,
            "compareAtPrice": 56.08,
            "hasDiscount": true,
            "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)
  }

Answer 1

尝试添加 keyFields: [], 如:

typePolicies: {
    ListProductSearchType: {
      keyFields: [],
      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]
            
          },
       
        },
      },
    },
  
  },