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:
const { data, isLoading } = useQuery({
queryKey: ["data"],
queryFn: queryFunction,
});
const { data, isLoading } = useQuery({
queryKey: ["data"],
queryFn: queryFunction,
});
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
Neto
Neto2y ago
can you show the queryFunction?
owenwexler
owenwexler2y ago
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.
josh-dev627
josh-dev6272y ago
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
Neto
Neto2y ago
when you use trpc provider it also adds query client provider
josh-dev627
josh-dev6272y ago
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
Neto
Neto2y ago
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
josh-dev627
josh-dev6272y ago
192.128.51.172:8080/api this is what I added as my NEXT_PUBLIC_API_URL
Want results from more Discord servers?
Add your server