Best way to edit data after useQuery call? #530
Replies: 12 comments 19 replies
-
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 |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
It shouldn’t do. If you clone an array by spreading, then Do you have a more comprehensive example? Or the repo? |
Beta Was this translation helpful? Give feedback.
-
This is not a bug, but definitely a good question. Converting to discussion.... |
Beta Was this translation helpful? Give feedback.
-
One thing that you can do (given you do not want to modify 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 |
Beta Was this translation helpful? Give feedback.
-
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.
|
Beta Was this translation helpful? Give feedback.
-
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` 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;
}], |
Beta Was this translation helpful? Give feedback.
-
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
}); |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
I have 2 functions, one is bringing all the data and the other one I'm handling some data.
|
Beta Was this translation helpful? Give feedback.
-
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
}) |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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:
Maybe this is expected behavior and I should just do all my post-fetch mutations in the query function itself?
Beta Was this translation helpful? Give feedback.
All reactions