Fetch data qith useQuery Next.js cookie

[marcianosr]

Hey!

I'm using react query for the first time, and got a little stuck using a query to fetch data.
I have a function that fetches data from an endpoint, which requires a cookie to send along in the request, which I receive from the Next.js functiongetServerSideProps.

I'm not sure how the useQuery function works in my React component. My code below doesn't work, as I am getting

 Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at Response.json (body.js?a645:120)
22:34:36.540 index.tsx?db76:23 

const Home: NextPage<LiftsProps> = (props) => {
	const { data, error } = useQuery("users", getLiftsFromUsers); // How does this work? 

	return (
		...
	);
};

export default Home;

export const getLiftsFromUsers = async (cookie: any) => {
	const response = await fetch("http://localhost:3000/api/lift/get-lifts", {
		headers: {
			Cookie: cookie || "",
		},
	});

	const userLifts = (await response.json()) as UserResponse;

	return userLifts.data;
};

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
	const session = await getSession({ req: req });
	const cookie = req.headers.cookie;
	if (!session) {
		return {
			redirect: {
				destination: "/signup",
				permanent: false, 
			},
		};
	}

	const queryClient = new QueryClient();

	await queryClient.prefetchQuery(["users", cookie], async () => {
		return getLiftsFromUsers(cookie);
	});

	return {
		props: { dehydratedState: dehydrate(queryClient) },
	};
};

Can anybody point me in the right direction?

[TkDodo]

the from prefetching have to match the keys exactly on useQuery. So if you do:

await queryClient.prefetchQuery(["users", cookie], async () => {
    return getLiftsFromUsers(cookie);
});

on the server, you also need to use ["users", cookie] on the client.

const { data, error } = useQuery("users", getLiftsFromUsers); // How does this work? 

so here, you would need to use the same key, and also pass the cookie to getLiftsFromUsers, like:

const { data, error } = useQuery(["users", cookie], () => {
    return getLiftsFromUsers(cookie);
});

[marcianosr]

Ah thank you! That worked!

Though data is filled correctly, I also (still) get an error from the useQuery. Am I still missing something here?

 Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at Response.json (body.js?a645:120)
22:34:36.540 index.tsx?db76:23 
```

[TkDodo]

not sure where this is coming from, I'm guessing you can't parse the JSON you're getting as a response? I don't think this is coming directly from react-query, since we don't do any json parsing

[marcianosr]

not sure where this is coming from, I'm guessing you can't parse the JSON you're getting as a response? I don't think this is coming directly from react-query, since we don't do any json parsing

Thanks, I'll debug it further!