Apollo 缓存查询字段策略 offsetLimitPagination() 不适用于订阅

问题描述

我使用 apollo 客户端来响应原生。

当我使用 offsetLimitPagination() 进行分页时，我的订阅不会更新缓存。

订阅功能正常，但不会更新平面列表数据。 当我删除 offsetLimitPagination 函数时，它可以工作。我不能在缓存上同时使用订阅和 offsetLimitPagination 函数。

有什么解决办法吗？`

谢谢。

缓存

const cache = new InMemoryCache({
    typePolicies: {
       Query: {
          fields: {
             chatDetail: offsetLimitPagination(),}
    }
},});

聊天详情页面

import React,{ useState,useCallback } from 'react'
import { StyleSheet,Text,View,FlatList } from 'react-native'
import { ActivityIndicator } from 'react-native-paper';


import { useQuery } from '@apollo/client'
import { useSelector } from 'react-redux'

import { CHAT_DETAIL } from '../../../Graphql/Queries/Message'
import { MESSAGE_SUB } from '../../../Graphql/Subscriptions/Message'

import MainFlow from './Components/Flow/MainFlow'


const ChatDetailMain = () => {
     const user = useSelector(state => state.auth.user)
     const currentRoom = useSelector(state => state.room.currentRoom)
     const [hasNext,setHasNext] = useState(true)
     const limit = 15
     const { error,loading,data,refetch,fetchMore,subscribetoMore } = useQuery(CHAT_DETAIL,{ 
     variables: { userId: user._id,roomId: currentRoom._id,limit },fetchPolicy: "cache-and- 
network",nextFetchPolicy: "cache-first" })

 // render item
 const renderItem = (
    ({item} ) => {
        return <MainFlow item={item} />
    }
)
if (error) {
    console.warn('CHAT_DETAIL QUERY ERROR: ',error)
    console.log(error.message);
    return (
        <View>
            <Text>
                An Error Occured: {error.message}
            </Text>
        </View>
    )
}
if (loading || data == undefined || data == null) {
    return (
        <View style={{ flex: 1,alignItems: 'center',justifyContent: 'center' }}>
            <ActivityIndicator size={50} color="gray" />
        </View>
    )
}
// fetchMore
const fetchMoreData=()=>{
    // console.log("fetchMore runnig hasnext limit,data.chatDetail.length >= limit ",hasNext,limit,data.chatDetail.length >= limit);
    if(hasNext && data.chatDetail.length >= limit){
        fetchMore({
            variables:{
                offset: data.chatDetail.length,limit: data.chatDetail.length+limit
            }
        }).then((flowMoredata)=>{
            if(flowMoredata.data.chatDetail.length==0 || flowMoredata.data.chatDetail.length === data.chatDetail.length){
                setHasNext(false)
            }
        })
    }
}
// subscription area
const subscribeQ = () => subscribetoMore({
    document: MESSAGE_SUB,variables: {
        userId: user._id
    },updateQuery: (prev,{ subscriptionData }) => {
        if (!subscriptionData.data) return prev;
        const { messageSub } = subscriptionData.data
        let current = {}
        let others = []
        switch(messageSub.type){
            case 'update':
                prev.chatDetail.map(message => {
                    if (message._id != messageSub.message._id) others.push(message)
                    if (message._id == messageSub.message._id) current = messageSub.message
                })
                return { chatDetail: [ current,...others ]}
            case 'remove':
                prev.chatDetail.map(message => {
                    if (message._id != messageSub.message._id) others.push(message)
                    if (message._id == messageSub.message._id) current = messageSub.message
                })
                return { chatDetail: [ ...others ]}
            case 'create':
                return { chatDetail: {  ...prev,chatDetail: [ messageSub.message,...prev.chatDetail] }}

            default: return { ...prev }
            }
    }
})
if (subscribetoMore != undefined && subscribetoMore) {
    subscribeQ()
}
return (
    <View>
        <FlatList
            data={data.chatDetail}
            renderItem={renderItem}
            keyExtractor={(item,index) => String(index)}
            onEndReached={fetchMoreData}
            onEndReachedThreshold={0.2}
            contentContainerStyle={{ paddingTop: 80 }}
            inverted={true}
        />
    </View>
)
 }

  export default ChatDetailMain

  const styles = StyleSheet.create({})

解决方法

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

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

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