How to properly keep previous fetched data in a hook

[hskang9]

I tried placeholderData property option with version 5.24.8, but it keeps returning empty array after refetch interval.
What am I missing?

"use client";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { fetchRecentTradesPaginated } from "@/queries";
import { GraphQLClient } from "graphql-request";
import { GraphQLAPIUrls } from "@/enums";

export const useRecentTradesPaginated = (
networkName: string,
base: { contract_address: string },
quote: { contract_address: string }
) => {
// GraphQL setup
const apiUrl: string = GraphQLAPIUrls[networkName];
const client = new GraphQLClient(apiUrl);
const queryClient = useQueryClient();

const [cursor, setCursor] = useState<string | null>(null);
const [prevCursor, setPrevCursor] = useState<string | null>(null);

const queryKey = [
recent-trade-${base.contract_address}-${quote.contract_address},
];

const fetchWithCursor = async (
base: { contract_address: string },
quote: { contract_address: string },
cursor: string | null,
client: GraphQLClient
) => {
const data = await fetchRecentTradesPaginated(base, quote, cursor, client);
// process base and quote with data
setCursor(data?.startCursor);
setPrevCursor(data?.endCursor);
return data;
};

const { data, error, status } = useQuery({
queryKey,
queryFn: () => fetchWithCursor(base, quote, cursor, client),
refetchInterval: 5000,
placeholderData: (previousData, _previousQuery) => previousData,
});

const fetchNext = () => {
if (data !== undefined && data?.hasNextPage) {
setPrevCursor(cursor);
setCursor(data?.endCursor);
queryClient.invalidateQueries({ queryKey });
}
};

const fetchPrev = () => {
if (data !== undefined && data?.hasPreviousPage) {
setCursor(prevCursor);
queryClient.invalidateQueries({ queryKey });
}
};

if (status === "pending" || status === "error") {
const previousData = queryClient.getQueryData(queryKey);
return {
data: data?.trades,
error,
status,
queryKey,
};
} else {
return {
fetchNext,
fetchPrev,
hasPreviousPage: data?.hasPreviousPage,
hasNextPage: data?.hasNextPage,
data: data?.trades,
error,
status,
queryKey,
};
}
};