在具有“合并”功能的 apollo 客户端分页配置中，即使调用 fetchMore，现有缓存数据也始终为空
Posted
技术标签:
【中文标题】在具有“合并”功能的 apollo 客户端分页配置中，即使调用 fetchMore，现有缓存数据也始终为空【英文标题】：in apollo client pagination configuration with "merge" function, existing cached data always is empty even after calling fetchMore 【发布时间】：2021-04-17 03:41:54 【问题描述】：我是 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,
// s-s-rMode: 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)
【问题讨论】：
嗨，我也有同样的问题。你能解决这个问题吗？ 【参考方案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]
,
,
,
,
,
【讨论】：
以上是关于在具有“合并”功能的 apollo 客户端分页配置中，即使调用 fetchMore，现有缓存数据也始终为空的主要内容，如果未能解决你的问题，请参考以下文章