Preserve data on refetch?

[MathiasHandle]

Hi, I'm very new to react-query and I have difficulties to create lazy loading. All the tutorials Ive found for lazy loading use REST api or Apollo. I'm using GraphQL.

What I have managed to code so far:

1. Declaring variables used for page length and offset, also I declare my query and fetch function.

let limit: number = 10;
let offset: number = 0;
export const QUERY = `
query fetchProducts ($limit: Int!, $start: Int!)  {
  products(limit: $limit, start: $start) {
    title
    price
    slug
    image {
      formats
    }
  }
}
`;

async function fetchData(endpoint: string, query: string, limit: number, start: number) {
	const res = await fetch(endpoint, {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
		},
		body: JSON.stringify({ query: query, variables: { limit, start } }),
	});
	const json = await res.json();
	const {
		data: { products },
	} = json;
	offset += 10; //Changing offset on every re-fetch
	return products;
}

2. useQuery hook I use. Ive switched off enabled as I was stuck in infinite loop of fetching (I dont know why).

const { data, status, refetch } = useQuery(["shop", limit, offset], () => fetchData(endpoint, QUERY, limit, offset), {
		keepPreviousData: true,
		enabled: false,
	});

3. Here I make the initial fill as enabled is set to false, and also I have function for fetching another page -> for testing purposes it works for a button currently

	useEffect(() => {
		refetch();
	}, [refetch]);

	const handleClick = () => {
		refetch();
	};

Well my pagination works, but I cannot keep the old data on re-fetch. They are erased and replaced with the new data. How should I fix this?

I was looking into useInfiniteQuery but once again I couldnt find any examples using GraphQL, everybody uses REST api and changes the url parameters.

[TkDodo]

it doesn't matter if you use rest or graphql. react-query is promise based, so everything that returns a promise works the same. You already have limit and offset as part of the query key, which is good. But where do you store this? This is more of a client-side state managment question. Just incrementing it as a side-effect in the query function (looking at offset += 10) is not gonna cut it.

enabled: false and refetch are also not the right direction imo.

Look at the pagination example: it keeps the page in local state (useState from react). You'd likely need to do the same with offset. Clicking next increases the offset by 10, which triggers a re-render, which changes the query key, which will trigger a refetch.

[MathiasHandle]

I still dont understand how should I preserve my old data. Ive moved the offset to local state

const [offset, setOffset] = useState(0);

Changed the useQuery hook as in example, also removed enabled: false

const { data, status } = useQuery(
		[["shop", offset], limit, offset],
		() => fetchData(endpoint, QUERY, limit, offset),
		{
		    keepPreviousData: true,
		}
	);

And when clicking on load more button (simulates scrolling to the bottom) I change the offset, Ive removed refetch() also:

const handleClick = () => {
    setOffset(offset + 1);
};

However, when I click on load more it still doesn't preserve the old data, and just replace them with new fetched products.

[MathiasHandle]

I've used react-query devtools and basically now my app works same as the one in pagination example you've posted, however in that example you choose the "active" (currently displayed data) state by navigating to different pages. As I'd like to render one long list I'd need something like spreading the old data and appending the newly fetched to the end of the array.

data = [...products, products: newlyFetchedData]

So when I render my component by

data.products.map(product => {
   return(
       <div>{product.name}</div> 
   )
} )

It would re-render my list with old data + newly fetched products.

[TkDodo]

if you want one long list, then really useInfiniteQuery is what you want. There, you'll keep the query key stable and compute the params needed to fetch the page in getNextPageParam.