我是 Apollo Client 的新手，我正在尝试为我的产品列表实现分页。但我不明白为什么合并函数中的现有参数总是返回空。每次调用 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",
"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)
}