Should we move over to react-query?

[shivankacker]

https://www.npmjs.com/package/@tanstack/react-query

React Query is a powerful package for managing APIs with type safety, caching, infinite queries, and inbuilt state management.
It is almost the standard for managing APIs in react.

Why to move

One of the main reasons are developer experience, and ease of maintenance. Lets take an example using the current request component in our codebase

const [loading, setLoading] = useState(false)
const [errors, setErrors] = useState([])
const [data, setData] = useState();

const query = useQuery(
   route,
   ...
)

useEffect(() => setData(query.data), [query.data]);

const handleUpdate = async () => {
  setLoading(true);
  const req = await request(...., data);
  if (req.ok) {
    notify("Ok")
    query.refetch()
  } else {
    notify("Error")
    setErrors(req.data)
  }
  setLoading(false);
}

{loading && "Form is submitting"}
{errors && "Form has errors"}

... make a form for our data
<button onClick={handleUpdate}>
save
</button>

This includes states like loading and error that is very cumbersome to write and maintain.
Here is the same thing with react-query

const [data, setData] = useState();
useEffect(() => setData(query.data), [query.data]);

const query = useQuery({
  queryKey: ["myquery", "type"],
  queryFn: ...
})

const mutation = useMutation({
  mutationFn: () => ....,
  onSuccess: () => query.refetch();
})

{mutation.isPending && "Form is submitting"}
{mutation.errors && "Form has errors"}

...form

<button onClick={() => mutation.mutate(data)}>
save
</button>

Way easier to maintain and check for statuses.

There are a lot of such usecases that will reduce the complexity of our codebase significantly. The less state management the better.

Pros of migrating

• better DX
• easier for new contributors to understand the codebase as most have prior experience with reactquery
• Typesafe
• we wont have to maintain our own hooks
• easier to make infinite queries
• has inbuilt context, so you can interact with a query from a child component without passing down props.

cons

• Too much refactoring
• another dependency package.

In the long run, it makes sense for us to switch over, and gradually deprecate the old hooks.

cc. @bodhish

[rithviknishad]

We could minimize the refactoring effort by reusing the request utility fn. for composing the react-query's queryFn, so that it provides type-safety for responses from our existing list of API routes defined.

const query = useQuery({
  queryKey: ['patient', patientId],
  queryFn: request(apiRoutes.getPatient)
})

[shivankacker]

Yes that was my initial thought as well

[rithviknishad]

Having react-query being used would also make the code more familiar to more contributors.

[gigincg]

We've finally moved to tanstack query with #9360