Refetch does not rerender
Hey I have the occurance that I refetch but then my components just load the old data so you have to reload to show the changes. This is my current code. I call this mutate function in my Child component. Does anybody know how I could fix this?
const {serverId} = useParams()
const {data, isLoading} = useQuery('join-manager', () => fetchJoinManager(serverId ?? "0"))
const servers: Server[] = useOutletContext();
const matchedServer = servers.find(server => server.id === serverId);
if (data === undefined || isLoading || matchedServer === undefined) {
return <LinearProgress/>
}
return <Child query={data} matchedServer={matchedServer}/>
}
const Child = (data: { query: JoinManagerType, matchedServer: Server }) => {
const queryClient = useQueryClient();
const mutateGeneral = useMutation({
mutationFn: (joinManagerData: JoinManagerType) => insertJoinManager(data.matchedServer.id ?? "0", joinManagerData),
onSuccess: () => {
queryClient.invalidateQueries({queryKey: ["join-manager"]}).then(_r => {
console.log("invalidating")
formik.setValues(formik.initialValues)
})
}
}) const {serverId} = useParams()
const {data, isLoading} = useQuery('join-manager', () => fetchJoinManager(serverId ?? "0"))
const servers: Server[] = useOutletContext();
const matchedServer = servers.find(server => server.id === serverId);
if (data === undefined || isLoading || matchedServer === undefined) {
return <LinearProgress/>
}
return <Child query={data} matchedServer={matchedServer}/>
}
const Child = (data: { query: JoinManagerType, matchedServer: Server }) => {
const queryClient = useQueryClient();
const mutateGeneral = useMutation({
mutationFn: (joinManagerData: JoinManagerType) => insertJoinManager(data.matchedServer.id ?? "0", joinManagerData),
onSuccess: () => {
queryClient.invalidateQueries({queryKey: ["join-manager"]}).then(_r => {
console.log("invalidating")
formik.setValues(formik.initialValues)
})
}
})
