blog/why-you-want-react-query

[giscus[bot]]

blog/why-you-want-react-query

Let's take a look at why you'd want a library like React Query, even if you don't need all the extra features it provides...

https://tkdodo.eu/blog/why-you-want-react-query

[Faithfinder]

Well, I'd say 2 & 3 are both missing features and not bugs. if (!data.length) return null is fine for a utilitarian interface in place of both loading and initial state

[TkDodo]

Hm, lots of bugs can be labelled as missing features. I'd say if something doesn't do what users would expect, it's a bug. Displaying nothing if the API returns an empty array is an unexpected behaviour in an edge case, just like the race-condition is an edge case.

[Faithfinder]

Replace null with "No data" string? Race condition and stale data in error are, very much, a bug, because there's a lot of potential to show incorrect information. Initial state being same as empty and loading though? Well, it's bad UX of course, but maybe the project is an internal tool and the users don't care?

[TkDodo]

Even if we don't agree on all points, two bugs is still enough for me to not hand-roll this :)

[Faithfinder]

Oh, for sure =P I'm never not using a library (Probably react query, but I can see myself going for Apollo or RTKQ). Just trying to be fair =P 2 bugs is a lot less than 5 =P

[srph]

folks, this is scratching the surface. react-query is amazing in so many ways. i am never going back. my favorites:

• easily share the data around without the need for context
• easily update said data with the need for context

react-query made react a lot more enjoyable for me again. almost all of my code is a lot more straightforward and declarative.

[srph]

real-time updates and polling all too easy too.

[swalker326]

I was a pretty early adopter of react query (tanner showed a handful of us at ui.dev). Every single person i've shown it to, has joined the cult. Great read, as always Tk.

[ezula]

Nice stuff, I want to use React Query. But you have a state bug on you blog ;) When entering the site with system setting set to dark mode I see the moon and not the sun. Perhaps a use case for react query ;) :D

[TkDodo]

my blog uses shitty tech because I'm more focussed on writing than on re-building it 😆 . But I will likely do so next year.

[Kanary159357]

I wonder is there any difference between
const A = useQuery().data
const {data: A} = useQuery()

Is there any recommend way?
The problem with the first method I thought, was that when returned data is object, and when I change A's property in useQuery().data. Some problem might be happen..

[Kanary159357]

• Cause first way have same reference..

[TkDodo]

There is no difference

[mibacode]

FYI that is called destructuring. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

[tijmen61]

Hey there, really enjoy(ed) reading your blog posts on React Query! I was wondering is it possible to extract a useMutation function outside of the component?

[TkDodo]

thanks. not sure I understand the question. Do you want to trigger a mutation from outside of react?

[tijmen61]

I would like to define all the useMutations and useQueries (like updateUser, deleteUser, createUser, getUsers, getUser) together inside a UserAPI.ts file. I found the following example where they have extracted them from the main component: https://v2.mantine-react-table.com/docs/examples/editing-crud

[tijmen61]

I just saw that there is also a Discord server for TanStack, I can also ask the question there if it is preferable.

[connorch]

Great article! Not really a bug per-se, but this will also trigger the following warning if the component unmounts before the fetch resolves:

Warning: Can't perform a React state update on an unmounted component.

I say this isn't a bug because it's really just React overreacting with a dramatic warning, but it easily could turn into a memory leak if you replaced the async fetch with a subscription.

[connorch]

This would also be resolved by the ignore-flag solution

[TkDodo]

React hast removed this "warning" in React 18 because it was a false positive more often than not.

see:

• Update to remove the "setState on unmounted component" warning reactwg/react-18#82

[mhfaust]

The .then call is missing a closing paren and the anonymous function passed into it is missing the closing curly brace for the code in sections 3, 4, and 5.

[mhfaust]

...Also in sections 1 and 2.

[TkDodo]

I don't see it, but PRs are appreciated 🙏

https://github.com/TkDodo/blog/blob/main/content/posts/why-you-want-react-query/index.mdx

[tizah]

Great article, I love react-query.

[Mavludin]

What is used to fetch data in useQuery under the hood? Isn't it useEffect after all?

Btw, I used React Query a long time ago when it was still called React Query. I appreciate what you do to make dealing with React less overwhelming. 🙏

[TkDodo]

a mixture of useEffect and useSyncExternalStore

[betoobernal]

I love it!

[hungify]

Clearly!

You also use useReducer hook for data fetching.

import React, { useReducer, useState } from "react";
import "./App.css";

interface Todo {
  id: number;
  text: string;
}

const FETCH_STATUS = {
  loading: "fetching",
  success: "success",
  error: "error",
} as const;

type FetchStatus = (typeof FETCH_STATUS)[keyof typeof FETCH_STATUS];

interface FetchState {
  status: FetchStatus;
  data?: Todo;
  error?: Error;
}

const FETCH_ACTIONS = {
  init: "init",
  success: "success",
  failure: "failure",
} as const;

type FetchAction =
  | {
      type: (typeof FETCH_ACTIONS)["init"];
    }
  | {
      type: (typeof FETCH_ACTIONS)["success"];
      payload: Todo;
    }
  | {
      type: (typeof FETCH_ACTIONS)["failure"];
      error: Error;
    };

const fetchReducer = (state: FetchState, action: FetchAction) => {
  switch (action.type) {
    case FETCH_ACTIONS.init:
      return {
        ...state,
        status: FETCH_STATUS.loading,
      };
    case FETCH_ACTIONS.success:
      return {
        ...state,
        status: FETCH_STATUS.success,
        data: action.payload,
        error: undefined,
      };
    case FETCH_ACTIONS.failure:
      return {
        ...state,
        status: FETCH_STATUS.error,
        error: action.error,
        data: undefined,
      };
    default:
      return state;
  }
};

function App() {
  const [count, setCount] = useState(0);

  const [state, dispatch] = useReducer(fetchReducer, {
    status: FETCH_STATUS.loading,
  });

  const { data, status, error } = state;

  const isFetching = status === FETCH_STATUS.loading;
  const isSuccess = status === FETCH_STATUS.success;
  const isError = status === FETCH_STATUS.error;

  React.useEffect(() => {
    let ignore = false;

    // 🏎️ Mocking race condition
    const fetch = new Promise<Response>((resolve) => {
      setTimeout(() => {
        resolve({
          ok: true,
          json: () => {
            if (count > 0) {
              return Promise.resolve({
                id: count,
                text: `Todo ${count}`,
              });
            }
            return Promise.reject(new Error("Failed to fetch data"));
          },
        } as Response);
      }, 100 * count);
    });

    dispatch({ type: FETCH_ACTIONS.init });
    fetch
      .then(async (res) => {
        const json = await res.json();
        if (!ignore) {
          dispatch({ type: FETCH_ACTIONS.success, payload: json });
        }
      })
      .catch((error) => {
        if (!ignore) {
          dispatch({ type: FETCH_ACTIONS.failure, error });
        }
      });

    return () => {
      ignore = true;
    };
  }, [count]);

  return (
    <>
      <h1>Todo</h1>

      {isFetching && <h1>Loading...</h1>}
      {isError && (
        <>
          <h1>Error: {error?.message}</h1>
        </>
      )}
      {isSuccess && (
        <>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </>
      )}
      <button onClick={() => setCount(count + 1)}>Increase {count}</button>
      <br />
      <br />
      <button onClick={() => setCount(count - 1)}>Descrease {count}</button>
    </>
  );
}

export default App;