Update without making network calls

[AminZibayi]

Hello There
In the Todo App example, it is not possible neither to add a todo to the todo list nor updating an existing todo without making any additional network calls because updateQueries completely replaces old data.

        setState(old => ({
          ...old,
          [queryHash]: {
            ...old[queryHash],
            data,
          },
        }))

We may request a large amount of data (e.g. to display using a virtualized table) and we may also want the users to be able to edit records or add new ones; in this case, refetchQueries requires fetching a big amount of data just because of partial changes, (the server responds with updated record)
Have any plans on adding any features handling this process?
A temporary solution is to store fetched data in a React state and update it after mutations.

[tannerlinsley]

Yes that sounds like a very special use case. I probably wouldn’t manage that data in react query. Tanner Linsley

…

On Oct 24, 2019, 9:14 PM +0200, Amin Zibayi ***@***.***>, wrote: Hello There In the Todo App example, it is not possible neither to add a todo to the todo list nor updating an existing todo without making any additional network calls because updateQueries completely replaces old data. setState(old => ({ ...old, [queryHash]: { ...old[queryHash], data, }, })) We may request a large amount of data (e.g. to display using a virtualized table) and we may also want the users to be able to edit records or add new ones; in this case, refetchQueries requires fetching a big amount of data just because of partial changes, (the server responds with updated record) Have any plans on adding any feature handling this process? A temporary solution is to store fetched data in a React state and update it after mutations. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[AminZibayi]

I've written a simple wrapper hook which helps with this situation, I have not tested it though:

import { useEffect, useState } from "react";
import { useQuery as _useQuery } from "@tannerlinsley/react-query-temp";

const useQuery = (...props) => {
  const [data, setData] = useState();

  const {res: data, ...rest} = _useQuery(...props)

  useEffect(() => {
    setData(res)
  }, [res]);

  return {data, setData, ...rest};
};

export default useQuery;

If you expose getQueryInfo, it would be possible to manipulate the state directly and there will be no need for any extra states (the state can be retrieved from _useQueryContext which is already exposed).

[tannerlinsley]

Seems like this is a perfectly simple abstraction for your use case. How would exposing useQueryContext help in this scenario? This is fairly edge case, but possible to solve as you've shown.

[AminZibayi]

_useQueryContext is already exported, It is possible to update the query data directly by manipulating the context if we know the queryHash of the query we are trying to update.

export function _useQueryContext() {
  return React.useContext(context)
}

That custom hook would help with this use case but a built-in solution would be better.

[tannerlinsley]

The next major version will take care of this. 👍

[tannerlinsley]

Stay tuned.