Client-Side Fetching with React-Query
Hi guys! so I have an external api that I needed to consume on the client-side. I assume that I don't need to setup anything since trpc already included react-query as a dependency so what I did was just imported useQuery from @tanstack/react-query and use:
But I constantly see undefined as a result to the data, and Can't even see the request being sent in the network tab. Am I missing something? Thank you!
7 Replies
can you show the queryFunction?
Try this syntax:
const response = useQuery([‘data’], async () => {
const response = await getDataFromAPI(); // where getDataFromAPI() is your function to fetch the data from the API
return response;
},{
cacheTime: 1000 * 60 * 5, // 5 minutes, or however long you want these values to be
staleTime: 1000 * 60 * 5,
refetchOnWindowFocus: false
});
That’s been working for me with RQ 4.12.
I think the keys need to be arrays now if I’m not mistaken because compound keys are a thing with RQ 4 and later (and I love that feature because I can do stuff like this [‘feed’, JSON.stringify(currentFilters), ‘page=1’] for a paginated filtered newsfeed on my web app).
Anyway hope this helps.
Do I need to add <QueryClientProvider client={queryClient}> in my _app.tsx?
The URL that I'm using is appended with localhost:3000, but I did not add it intentionally
when you use trpc provider
it also adds query client provider
how do I query an external api such as one that is not hosted by me but by other api providers? I want to fetch data using client-side fetching but can't because every request is appended localhost:3000
check your request
but probably you are requests from root
/some-domain/something/something2
when you it should be
https://some.com/some-domain/something/something2
192.128.51.172:8080/api this is what I added as my NEXT_PUBLIC_API_URL