Creating a Wrapper hook over useQuery in Typescript
Hey I’m trying to implement something like this
const { useQuery } = require("react-query");
const useAuthedQuery = (...options) => {
const query = useQuery(...options);
if (query?.error?.response?.status === 401) {
// Insert custom access-token refresh logic here. For now, we are
// just refreshing the page here, so as to redirect them to the
// login page since their token is now expired.
window.location.reload();
}
return query;
}
export default useAuthedQuery;
But the code for the frontend is in typescript and I’m not able to figure out how to setup the types for input and output for the same properly please do let me know how can I tackle this thanks
My use case is to handle 401 errors and refresh etc the page accordingly
1 Reply
deep-jade•3y ago
Here are some great resources to get started with Tanstack query and TypeScript:
- https://tkdodo.eu/blog/react-query-and-type-script
- https://tanstack.com/query/latest/docs/react/typescript
The
options parameter's type is UseQueryOptions which accepts the same 4 generics described in the first link.React Query and TypeScript
Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety.
TypeScript | TanStack Query Docs
React Query is now written in TypeScript to make sure the library and your projects are type-safe!
Things to keep in mind: