T
TanStack•3y ago
optimistic-gold

How to use React Query with React's Context API

I am attempting to refactor a Provider component, where state is being handled, e.g. 
const [products, setProducts] = useState<Product[]>([]);

const {
    data: fetchedProducts,
    isFetching: isProductsFetching,
    isLoading: isProductsLoading,
    refetch: refetchProducts,
  } = useQuery({
    queryKey: ['products'],
    queryFn: () =>
      getProducts()
        .then((res) => res.json())
        .then((response: getProductsResponse) => response.data),
});
const [products, setProducts] = useState<Product[]>([]);

const {
    data: fetchedProducts,
    isFetching: isProductsFetching,
    isLoading: isProductsLoading,
    refetch: refetchProducts,
  } = useQuery({
    queryKey: ['products'],
    queryFn: () =>
      getProducts()
        .then((res) => res.json())
        .then((response: getProductsResponse) => response.data),
});
Below are examples of functions which are CRUD operations: 
const addNewProduct = (product: Product): void => {
  setProducts(addProduct(products, product));
};

const getAProductById = (productId: string) => getProductById(products, productId);

const deleteAProduct = (productId: string) => {
  setProducts(products.filter((product) => product.productId !== productId));
};
const addNewProduct = (product: Product): void => {
  setProducts(addProduct(products, product));
};

const getAProductById = (productId: string) => getProductById(products, productId);

const deleteAProduct = (productId: string) => {
  setProducts(products.filter((product) => product.productId !== productId));
};
My understanding is to be able to refactor this would involve the use of the useMutation hook. However, I am not sure where to start and any pointers/examples would be very much appreciated!
4 Replies
rival-black
rival-black•3y ago
Here is a good read about mutations: https://tkdodo.eu/blog/mastering-mutations-in-react-query and also the docs to get started: https://tanstack.com/query/v4/docs/react/guides/mutations. Do you have some more specific questions/examples?
Mastering Mutations in React Query
Learn all about the concept of performing side effects on the server with React Query.
Overview | TanStack Query Docs
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation
optimistic-gold
optimistic-goldOP•3y ago
Yeah - I've seen these, but am not sure if they would apply to my use case
genetic-orange
genetic-orange•3y ago
the simplest way is to invalidate your query (R) to refetch your products after mutation (C/U/D).. alternatively you'd be looking at Optimistic Updates https://tanstack.com/query/v4/docs/react/guides/optimistic-updates where you'd be modifying your query cache after mutations while also refetching the data in the bg to ensure data integrity
Optimistic Updates | TanStack Query Docs
When you optimistically update your state before performing a mutation, there is a chance that the mutation will fail. In most of these failure cases, you can just trigger a refetch for your optimistic queries to revert them to their true server state. In some circumstances though, refetching may not work correctly and the mutation error could ...
rival-black
rival-black•3y ago
We'll need more context to be able to help. Can you share more on what you're trying to achieve (with code samples or sandbox)?

Did you find this page helpful?