Proper way of dealing with useInfiniteQuery misbehavior

[waptik]

Hi!
I'm using useInfiniteQuery to create a load more mechanism. I do in two different place: 1 and 2.

In [1], the load more state works fine. It doesn't have any issue.
But in [2], the last result of the initial fetch is included in the following fetched data. You can check the console, i logged the returned data there.

The code is use for:

Recent donations on profile page

//hook
export const useCreatorDonationsReceived = (props: useCreatorDonationsReceivedProps) => {
	return useInfiniteQuery(
		[CREATORS_QUERIES.getDonations, { creator: props.slug }],
		async ({ pageParam }) => {
			return await graphQLClient(2).request(
				getCreatorDonationsReceivedQuery,
				getDonationsContainerQueryVariables({ ...props, page: pageParam }),
			);
		},
		{
			getNextPageParam: lastPage => {
				return lastPage.transactions.pagination.next;
			},
		},
	);
};

// format variables
const getDonationsContainerQueryVariables = ({ slug, type, page = 1 }: getCreatorDonationsReceivedProps) => {
	return {
		slug,
		limit: DONATIONS_PER_PAGE,
		page,
		type,
	};
};

// using the hook
const {
		data,
		error,
		fetchNextPage,
		hasNextPage,
		isFetching,
		isFetchingNextPage,
		status,
	} = useCreatorDonationsReceived({
		slug,
		type,
	});

User Posts

// hook
export const useCreatorPosts = ({ creator, props }: useCreatorPostsProps) => {
	return useInfiniteQuery(
		[CREATORS_QUERIES.getPosts, { creator }],
		async ({ pageParam }) => {
			return await graphQLClient().request(getCreatorPostsQuery, getPostsVariables({ ...props, page: pageParam }));
		},
		{
			getNextPageParam: lastPage => {
				return lastPage.allPosts.pagination.next;
			},
		},
	);
};

// format variables
export const getPostsVariables = ({ creator, limit, page = 1 }: getCreatorPostsProps) => {
	const vars = {
		CreatorId: creator.ref,
		page,
		limit: limit || POSTS_PER_PAGE,
	};
	isDev && console.log({ creator, limit, page, vars });

	return vars;
};

// using the hook
const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useCreatorPosts({
		creator: creator.slug,
		props: {
			creator,
		},
	});

You can test it here https://beta.ku-di.com/ku-di/posts.
I also created an api endpoint, append ?page= with the value of pagination.next to fetch the page.

As you can see, the result from api endpoint and the one the posts page are different.

[TkDodo]

But in [2], the last result of the initial fetch is included in the following fetched data. You can check the console, i logged the returned data there.

I am not seeing that. The pages have ids 5,6,7 in the first page, and 8,4,1 in the next page:

what am I missing? It would also help to get a minimal codesandbox to reproduce the problem

[waptik]

It seem to happen when i'm logged in and some of the posts are set to private which can only be seen by admin or supporters.
A minimal reproduction on csb will be hectic because of authentication and the whole setup.

As you can in the screenshot, first page has 5,6,7 ; page 2 has 7,8,4; page 3 has 1,3,2.

[TkDodo]

can you compare this to what the backend actually sends in the network tab of the devtools? To me, this looks just like the backend sending the wrong things when you are logged in 🤷

[waptik]

Some weird things are happening.

1. The first page data can't be found in the network tab, i don't know if it's because i'm prefetching from server side in GetStaticProps but the second and the third can be found.
2. The total pages is different for page 1(8) but consistent for page 2 and page 3(both 9)

3. When i query the endpoint directly using graphql playground and my token(which is used to check if my session if valid or not), i get no duplicate.
   
   
   

I will try and create a min example on csb and post the link here.

[waptik]

So i created a minimal reproduction of it at https://codesandbox.io/s/react-query-nextjs-ztxmg, though the load more is not working.
I think i know why it's behaving that way, it's how I fetch token from local storage and add it to graphql-request header.

In the mini demo, i set the token as a secret and put it directly inside the header of the api route as seen at https://codesandbox.io/s/react-query-nextjs-ztxmg?file=/pages/api/graphql.js:247-298

As per my understanding, on first load, the token isn't fetched but is fetched on second and next load.

Here's how it was done with Apollo Client:

...
function createApolloHttpLink({ graphqlUrl } = {}) {
  const authLink = setContext((_, { headers }) => {
    const token = getFromLocalStorage(KEYS_FOR_LOCAL_STORAGE.TOKEN);
    if (token) {
      return {
        headers: {
          ...headers,
          authorization: `Bearer ${token}`,
        },
      };
    }
  });
  const errorLink = onError(({ graphQLErrors, networkError }) => {
    // formatting graphql error message
 }

const httpLink = ApolloLink.split(
//split some links
)

  return ApolloLink.from([errorLink, authLink, httpLink]);
}

// the following function is derived from https://github.com/vercel/next.js/blob/canary/examples/with-apollo/lib/apolloClient.js#L11
function createClient() {
  const cache = createInMemoryCache();
  const link = createApolloHttpLink();


  return new ApolloClient({
    cache,//: new InMemoryCache()
    link,
    connectToDevTools: isDev,
    ssrMode: typeof window === 'undefined', // Disables forceFetch on the server (so queries are only run once)
    ssrForceFetchDelay: 100, // See https://www.apollographql.com/docs/react/performance/server-side-rendering/#store-rehydration
  });
}

And here's how i do it with graphql-request

export function graphQLClient(apiVersion = 1) {
	const endpoint = apiVersion === 2 ? getGraphqlUrl("v2") : getGraphqlUrl("v1");
	const token = getFromLocalStorage(KEYS_FOR_LOCAL_STORAGE.TOKEN);

/***
const headers = {
		authorization: `Bearer ${token}`,
	};
***/

	const client = new GraphQLClient(endpoint, {
		fetch: process.browser ? fetch : serverSideFetch, // serverSideFetch is a fetch function based on cross-fetch with additional config
		// headers: token && headers,
	});

	client.setHeader("authorization", `Bearer ${token}`);

	return client;
}

[waptik]

@TkDodo So I found the reason why issue occurred. It's because I'm prefetching the query inside GetStaticProps that's why the initial load doesn't contain data for logged in users.
According to vercel/next.js#17247 (reply in thread), fetching localstorage and cookies in GSSP will not work.

Everything is fine with react-query.
Thanks for your time yesterday, I really appreciate it!