T
TanStack•16mo ago
eastern-cyan

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)
            })
        }
    })
1 Reply
eastern-cyan
eastern-cyanOP•16mo ago
I checked and it does refetch but formik.setValues sets the initial values which should be the data and there is the problem If it rerenders the data should be the new one but it is the old one 
    const formik = useFormik({
        validationSchema: ValidationSchema,
        initialValues: {
            message: {
                channel: data.query.message.channel,
                message: data.query.message.message,
                status: data.query.message.status,
                theme: data.query.message.theme
            },
            joinRole: {
                roles: data.query.joinRole.roles
            },
            verify: {
                status: data.query.verify.status,
                roles: data.query.verify.roles
            }
        },
        onSubmit: value => {
            mutateGeneral.mutate(value)
        },
    })
    const formik = useFormik({
        validationSchema: ValidationSchema,
        initialValues: {
            message: {
                channel: data.query.message.channel,
                message: data.query.message.message,
                status: data.query.message.status,
                theme: data.query.message.theme
            },
            joinRole: {
                roles: data.query.joinRole.roles
            },
            verify: {
                status: data.query.verify.status,
                roles: data.query.verify.roles
            }
        },
        onSubmit: value => {
            mutateGeneral.mutate(value)
        },
    })
This is my formik I see my formik is the problem nvm got it

Did you find this page helpful?