Handling data with
Domitrius Clark
Advocate Engineer @ Cloudinary
@domitriusclark
/domitrius_anthony
OK FIRST
what is react-query and why use it?
react-query plainly, is a set of hooks that assist you in dealing with asynchronous data in whatever way you'd prefer
As long as your request returns a promise, react-query can make use of it.
useQuery | usePaginatedQuery | useInfiniteQuery
You're probably wondering what happens when feeding a request through react-query.
Let's begin by taking a look at an example of the useQuery hook.
const { data, status } = useQuery(
query.id && ['user', query.id],
async (key, id) => {
const user = await fetch(`/api/user/${id}`);
return user.json();
}
);
queryKey
async fetch function
useQuery's return vars
We'll start by talking about the queryKey argument. The queryKey is used to define the cache key that will hold onto your data. For example ['user', query.id] sets up our cache to attach to user.
Next is your async fetch function . You see here we're using a REST endpoint with our fetch function to get our response. You can also use things like axios or graphql-request . As was stated, anything that returns a Promise can be fed to the useQuery hooks.
async (key, id) => {
const user = await fetch(`/api/user/${id}`);
return user.json();
}{data, status, error} — the variables we destructure from useQuery allow us ways to set up our UI for incoming data, loading status, and error's your request return.
Possible Returns
- data
- latestData
- error
- isFetching
- resolvedData
- refetch
- failureCount
The usePaginatedQuery and useInfiniteQuery hooks allow us to deal with fetching our data in chunks that return variables we're used to ie status & error , but also allow us to hook into other variables like resolvedData and isFetching which again help us prepare our UI for data updates and serving cached data from previous requests.
const {
status,
resolvedData,
latestData,
error,
isFetching
} = usePaginatedQuery(
['topAnimeList', page],
async (key, page) => {
const topAnime = await fetch(`https://api.jikan.moe/v3/top/anime/${page}`);
return topAnime.json();
}
);Let's check out a quick example of how our user query can be done with graphql.
const GET_USER = `
query GetUser($id: ID!) {
getUser(id: $id) {
name
id
email
}
}
`;
const { data, status } = useQuery("user", id], async (key, id) => {
const user = await request(`https://yourendpoint/graphql`,GET_USER, { id })};
return user;
})useMutation
We've seen how to deal with requesting our data. Now how do we handle manipulating our data with a POST, PUT, or DELETE.
const [createPost] = useMutation(
async ({ post }) => {
await fetch('/api/create/post', {
method: "POST",
body: JSON.stringify(post)
});
},
{
onSuccess: () => {
queryCache.refetchQueries('posts');
}
}) Here we are given our useMutation
function that fires off your useMutation hook.
useMutation's secondary object argument comes with some built in utilities:
- onMutate
- onSuccess
- onError
- onSettled
- throwOnError
- useErrorBoundary
Last, but most certainly not least, is the power of the queryCache.
function removeCharacterFromFavorites({ character }) {
queryCache.setQueryData('favoriteCharacters', prevData => {
return prevData.filter(data => data.id !== character.id)
});
}
function fetchFavoriteCharacters(key) {
return queryCache.getQueryData('favoriteCharacters');
}The queryCache comes built in with a slew of different built in helpers, that allow you to lightly and forcefully make updates, fact check, and refresh your cache
THANK YA'LL FOR COMIN 😍
MagnoliaJS Conf - React Query
By domitrius
MagnoliaJS Conf - React Query
A constant hot topic in the world of React centers around how we should interact with data. Since the release of hooks, this topic has blown up further with newer and simpler ways to fetch, cache, and update asynchronous data. React Query is a tool that has completely answered that question for me. Join me as we dive into the strengths of it's developer experience and see multiple examples of it's hooks at work.
