'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