'React-query mutation dosent refresh
I have another fetch of "SpecificList in another component, but when posts excutes it dosent refetch it only refetches on rewindowfocus? What could the reason be?
const { mutate,isLoading:isAdding } = useMutation((values)=>handleAddValue(values),
{
onSuccess:()=> queryClient.invalidateQueries("specificList")
},
)
async function handleAddValue(values){
return await ShoppingListAPI.post("/addToShoppingList",{
product:values.newValue,
list:values.listId
})
}
if(isAdding){ return <p>Loading...</p> }
if (isLoading) { return <p>Loading...</p> }
return (
<Box>
{data.products &&
<Autocomplete onChange={(event, newValue) => mutate({newValue,listId})
} options={data.products} getOptionLabel={(option) => option.name} renderInput={(params) => <TextField {...params} label="Products" />}></Autocomplete>
}
</Box>
)
Solution 1:[1]
What could the reason be?
hard to tell without seeing the whole code / a codesandbox reproduction. Some things to keep an eye on are:
- matching query keys (upper case / lower case)
- make sure the
queryClient
is stable: either created outside of your App component, or inside it on a state or ref instance. Otherwise, a re-render will create a new client, throwing away the cache. - maybe your mutation is not Successful, so
onSuccess
is not called.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | TkDodo |