如何解决在具有“合并”功能的 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 举报,一经查实,本站将立刻删除。