Best way to edit data after useQuery call?

[Buuntu]

I've had some weird instances where changing the data fetched from a query changes it in the cache (and therefore everywhere that depends on that data).

What's the current best practice for altering data after fetching it - in the query function itself? Is there any good way to change it in the component after the data is loaded?

An example:

const Comp = () => {
  const { data } = useQuery('get', asyncFunc);

  if (data) {
    const dataCopy = [...data];
    dataCopy.push('new object'); // data is corrupted here everywhere that depends on this query
  }
  ...
  // do something with dataCopy

Maybe this is expected behavior and I should just do all my post-fetch mutations in the query function itself?

[jackmellis]

The key is with the term mutations. If you edit the data object it’ll affect the data value in the cache. Any post-query transformations should always be done with immutability in mind

[Buuntu]

I guess I'm a little confused because even when I make a deep copy of the data with the spread operator it seems to affect this cache. Maybe there's something weird I don't understand with push that's happening under the hood.

[bearkfear]

use clone from lodash.

[jackmellis]

It shouldn’t do. If you clone an array by spreading, then newArray.push shouldn’t have any impact on the original array.

Do you have a more comprehensive example? Or the repo?

[tannerlinsley]

This is not a bug, but definitely a good question. Converting to discussion....

[ayush987goyal]

One thing that you can do (given you do not want to modify asyncFunc) is you can useEffect as:

const Comp = () => {
  const { data } = useQuery('get', asyncFunc);
  const [modifiedData, setModifiedData] = useState();

  useEffect(() => {
	if (data) {
	    const dataCopy = [...data];
	    dataCopy.push('new object');
		setModifiedData(dataCopy);
  	}
  }, [data]);

  ...

  // do something with modifiedData

[NorimboyevErkin]

const { data: { rawCategories = {}, categories = [] } = {} } = useQuery(
'cacheKey',
()=> ...,
{
select: ({ data }) => ({
newData: data.filter(id => id !== "undefined"),
}),
},
);

[tannerlinsley]

Why not just useMemo? Or even better, why not change it in the query function?

…

On Jun 23, 2020, 2:40 AM -0600, Ayush Goyal ***@***.***>, wrote: One thing that you can do (given you do not want to modify asyncFunc) is you can useEffect as: const Comp = () => { const { data } = useQuery('get', asyncFunc); const [modifiedData, setModifiedData] = useState(); useEffect(() => { if (data) { const dataCopy = [...data]; dataCopy.push('new object'); setModifiedData(dataCopy); } }, [data]); ... // do something with modifiedData — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[blomm]

how would this look for useQueries? (I cant seem to get it to only call modifyData once after all the queries have finished)

// Modify the data only for this component instance
const { data } = useQuery('get', queryFn);
const modifiedData = useMemo(() => modifyData(data), [modifyData, data])

what I've tried:

const modifiedData = useMemo(
    () => modifyData(distQueries.map((dq) => dq.data)),
    [modifyData, distQueries.map((dq) => dq.data)]
  );

[plantshopping]

Is there a full example? My data gets modified but the updated data isn't being reflected in the UI

[TkDodo]

please post a minimal codesandbox reproduction of your problem so that I can take a look.

[buglessir]

Behold!

// Modify the data before it's cached
const { data } = useQuery('get', async () => {
  const data = await queryFn()
  return modifyData(data)
});

// Modify the data only for this component instance
const { data } = useQuery('get', queryFn);
const modifiedData = useMemo(() => modifyData(data), [modifyData, data])

But your solution has a problem, this hook doesn't return the correct server errors 😑

[cesarramirez1912]

I'm using useMemo and it's changing the values ​​in another instance!

   const { isLoading: isLoadingSales, data, error: errorSales } = useSales();

    const newData = useMemo(() => simplifyData(data), [simplifyData, data]);

    function simplifyData(sss) {
        var aux = [];
        const res = [...sss];
        res.map((sale) => {
            aux = [];
            sale.productos.map((producto) => {
                const find = aux.find(prod => prod.id === producto.id);
                if (!find) {
                    aux.push(producto);
                } else {
                    find.cantidad = find.cantidad + producto.cantidad;
                }
            });
            sale.productos = aux;
        })
        return res;
    }

[ansh]

One thing I do want to add here is that you can use built-in features off Axios (perhaps for other HTTP clients too but I have not checked).

For example, you can use transformResponse and even transformRequest to modify your data when you receive it and before you send it without using a .then() block.

  // `transformResponse` allows changes to the response data to be made before
  // it is passed to then/catch
  transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],

[ImanMahmoudinasab]

The drawback with this one is the function you pass as a transformer should take care of a lot of things, e.g. it should detect if the response is an error or success; for json api data is a json string, and your transformer function should parse it as an object, etc. This is too much for just updating a field in success object response, IMO.

[ashfahan]

Now we can even use Select which can be used to transform or select a part of the data returned by the query function.

 const teams = useQuery("querykey", () => queryfn(), {
    onError: () => sendErrorNotification("some error occured"),
    select: (res: Response) => res.entry.map((entry) => entry.resource), // picks only resource array from entry that was in response
  });

[matias-retargetly]

do you know if it is posible change the cache data in the select function? thanks

[TkDodo]

no, because select runs for every observer, and can be different per observer. The data in the cache is always equivalent to what is returned from the queryFn. If you want to "change" it, return something else from the queryFn:

https://tkdodo.eu/blog/react-query-data-transformations#1-in-the-queryfn

[matias-retargetly]

oh! nice super simple, thnks man

[jayarjo]

What if I want to modify the retrieved data, before it goes into cache? Lets say server returns a lousy data structure and I would like it to make more sense.

[vago]

Wouldn't Tanner's solution of modifying the response before it goes into cache do the needful?
#530 (reply in thread)

[TkDodo]

I have outlined the various different ways of doing data transformations with react-query with their respective pros and cons here: https://tkdodo.eu/blog/react-query-data-transformations

[cesarramirez1912]

I have 2 functions, one is bringing all the data and the other one I'm handling some data.
Bad when I call the useSalesSimplify function on another screen it overwrites the entire cache.

function App() {

const { isLoading: isLoadingSales, data: dataSales, error: errorSales } = useSales();

----------------------Here it brings all the data OK-------------------------------

}

export const useSales = () => {
    return useQuery(
        "sales",
        async () => {
            let sales = await API.loadColletion(salesCollection);
            sales.forEach((p) => {
                let value = new Date(p.fecha.seconds * 1000);
                p.fecha = formatDateBr(value);
            });
            return sales;
        },
    );
};

export default function DetailsScreen() {

const { isLoading: isLoadingSales, data: dat, error: errorSales } = useSalesSimplify();

-------- When I go to this screen it overwrites the entire "sales" cache ---------------

}

export const useSalesSimplify = () => {
    return useQuery(
        "sales",
        async () => {
            let sales = await API.loadColletion(salesCollection);
            sales.forEach((p) => {
                let value = new Date(p.fecha.seconds * 1000);
                p.fecha = formatDateBr(value);
            });
            return sales;
        },
        {
            select: (res) => {
                let aux = [];
                res.map((sale) => {
                    aux = [];
                    sale.productos.map((producto) => {
                        let find = aux.find(prod => prod.id === producto.id);
                        if (!find) {
                            aux.push(producto);
                        } else {
                            find.cantidad = find.cantidad + producto.cantidad;
                        }
                    });
                    sale.productos = aux;
                })
                return sales;
            }
        }
    );
};

[TkDodo]

I think you have a simple mutation problem (as in, modifying data in-place, not a react-query mutation). When the select function gets the res passed, and you mutate it in place, you indirectly also mutate the cache value. As always with react, try to embrace an immutable approach to data manipulation and write pure functions that don't manipulate their input.

[tklaas]

I had this problem, too, since I am working with models from https://github.com/graphiti-api/spraypaint.js to get and send data to a json:api backend.

I came up with a simple solution that might help others:

In my vue component, (will work for react, too), I have this code where "Team" is my spraypaint model

  const team = ref<Team>()

  onMounted(() => refetchTeamData()) // initial data loading

  const { data, refetch: refetchTeamData} = useQuery({
    queryKey: ['teamId123'],
    queryFn: () => Team.find('teamId123').then(data => data.data), // .then is spraypaint specific to get the correct node in response
    select: (data) => {
      // save data to ref since tanstack query makes returned value readonly for cache usage
      team.value = data
      return data
    },
    enabled: false // set enabled to false, so the data is not accidentally overridden. reloading data can be done via refetch function
  })

[OmarMoataz]

Question regarding this discussion: If I have cached data returned from useQuery A and then that same API is being called somewhere else (useQuery B) and react-query is pulling that data from cache because it has the same query key. How can I ensure that the data is passed to a different transformer after retrieving the value from cache. There is a way where I change the query key but that seems like a wasted API call to me.

[TkDodo]

use the select option.