RTK query send data, is coming back manipulated

Viewed 30

At work, I need to make an infinite scroll pagination with RTK-query. I am using Firestore as a DB, and I made a very basic version with just async functions super quickly. Now I need to convert what I have made to RTK query.

As I was doing this I noticed I was not longer able to fetch more data from Firestore because my query with Firestore was not responding. After doing some digging, I found out that RTK query is somehow changing my data. I will explain below with my code. This very well would be a Firestore problem as well.

   async queryFn() {

                try {
                    const { prod, lastDoc } = await fetchInitialData();

                    return { data: { prod, lastDoc } };
                } catch (err) {
                    return { error: err };
                }

This is how I am sending my data with RTK-query, I left a lot of code out since it is not needed. Down below is my react file, that calls my RTK query hook, as well as checks to see if the data being sent from RTK is correct

const [products, setProducts] = useState<BasicProductData[] | null>();
const [lastDocSaved, setLastDocSaved] = useState<any>();

const { data, isLoading, isError, error, isSuccess, refetch } = useFetchProductsQuery(null);


useEffect(() => {
    getPost();
    if (data && lastDocSaved) {
        console.log(data.lastDoc === lastDocSaved);
    }
}, []);

const getPost = async () => {
    const { prod, lastDoc } = await fetchInitialData();
    setProducts(prod);
    setLastDocSaved(lastDoc);
};

As you can tell both of these ways of getting the initial data is pretty much exactly the same. Finally here is my pagination function, to fetch more data from firebase to keep the infinite scroll going.

 const getMorePosts = async () => {
  
    const postData = await fetchMoreData(lastDocSaved);
    setLastDocSaved(postData.lastDoc);
    setProducts([...products, ...postData.prod]);

};

I know that 'data' I get back from the RTK hook is not the same since I manually have checked if is by using that console.log in the useEffect. I also know it does not work since if I setLastDocSaved(data.lastDoc) the pagination does not work.

This is strange to me, since both data.lastDoc and const { lastDoc } = await fetchInitialData() come back as pretty much identical in the console, however lastDoc properly queries from firebase and data.lastDoc does not.

0 Answers
Related