T
TanStack•3y ago
fair-rose

How to get new `useQuery` data inside a mutation's `onSuccess`?

const {
    data: projectWorkflows,
} = useGetProjectWorkflowsQuery(project.id);

const createWorkflowMutation = useCreateProjectWorkflowRequestMutation({
    onSuccess: (project) => {
        // In this mutation, a new projectWorkflow is created
        // But, when I log projectWorkflows it has the value from before the success of this mutation
        // How can I access the newly created projectWorkflow inside this onSuccess?
    }
});
const {
    data: projectWorkflows,
} = useGetProjectWorkflowsQuery(project.id);

const createWorkflowMutation = useCreateProjectWorkflowRequestMutation({
    onSuccess: (project) => {
        // In this mutation, a new projectWorkflow is created
        // But, when I log projectWorkflows it has the value from before the success of this mutation
        // How can I access the newly created projectWorkflow inside this onSuccess?
    }
});
10 Replies
typical-coral
typical-coral•3y ago
bcoz the projectWorkflows accessed inside the onSuccess is the closure from the previous render instance usually if your API returns you the newly created entity, you could access that directly in the onSuccess. could you elaborate more on your use case?
fair-rose
fair-roseOP•3y ago
So I have this part of the UI that creates a new workflow. I want to navigate (using react-router) to that newly created workflow (by using its id as a param) and set it to React's state. The select next to the trigger button also needs to update its value to reflect the newly created workflow. I don't have much experience with react-query so there might be a simpler solution to this that I am overlooking
No description
typical-coral
typical-coral•3y ago
does your create API return the newly created entity or ID?
fair-rose
fair-roseOP•3y ago
async createProjectWorkflow(requestParameters: CreateProjectWorkflowRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<ProjectModel> {
    const response = await this.createProjectWorkflowRaw(requestParameters, initOverrides);
    return await response.value();
}

export const useCreateProjectWorkflowRequestMutation = (
    mutationProps?: CreateProjectWorkflowRequestMutationProps
) =>
    useMutation({
        mutationFn: (request: CreateProjectWorkflowRequest) => {
            return new ProjectsApi().createProjectWorkflow(request);
        },
        onSuccess: mutationProps?.onSuccess,
        onError: mutationProps?.onError,
    });
async createProjectWorkflow(requestParameters: CreateProjectWorkflowRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<ProjectModel> {
    const response = await this.createProjectWorkflowRaw(requestParameters, initOverrides);
    return await response.value();
}

export const useCreateProjectWorkflowRequestMutation = (
    mutationProps?: CreateProjectWorkflowRequestMutationProps
) =>
    useMutation({
        mutationFn: (request: CreateProjectWorkflowRequest) => {
            return new ProjectsApi().createProjectWorkflow(request);
        },
        onSuccess: mutationProps?.onSuccess,
        onError: mutationProps?.onError,
    });
I think these are the 2 relevant queries And yes, the project here is the updated project with the newly created workflow 
const createWorkflowMutation = useCreateProjectWorkflowRequestMutation({
    onSuccess: (project) => {
const createWorkflowMutation = useCreateProjectWorkflowRequestMutation({
    onSuccess: (project) => {
Note: the project here contains workflowIds, so I need to find the workflow from a list thats returned by useGetProjectWorkflowsQuery(project.id) with the new workflowId
typical-coral
typical-coral•3y ago
ah i see.. you can't access the updated query inside onSuccess, coz it'll contain the stale value what you can do is that you can call the API used in useGetProjectWorkflowsQuery in your mutationFn, and seed the data using queryClient.setQueryData
fair-rose
fair-roseOP•3y ago
I'll try it out, I see my colleague that made our queries noticed a bug in his implementation, so that might fix it, too. Thanks, I'll report here with my findings.
what you can do is that you can call the API used in useGetProjectWorkflowsQuery in your mutationFn, and seed the data using queryClient.setQueryData
Can you share a snippet of how mutationFn would look? I'm having trouble with the updater param for queryClient.setQueryData, I can't think of how to write it.
typical-coral
typical-coral•3y ago
i don't know the details of your APIs, but it should look sth like this 
export const useCreateProjectWorkflowRequestMutation = (
    mutationProps?: CreateProjectWorkflowRequestMutationProps
) => {
    const queryClient = useQueryClient();
    return useMutation({
        mutationFn: async (request: CreateProjectWorkflowRequest) => {
            // This is assuming it's returning project, otherwise you could get it from request
            // also you should prob initialize your ProjectsApi only once
            const project = await new ProjectsApi().createProjectWorkflow(request);
            const workflows = await new ProjectsApi().getProjectWorkflowsQuery(project.id);
            // this will update the workflows in the cache for the project
            queryClient.setQueryData(['workflows', { projectId; project.id }], workflows);
            return { project, workflows }; // how do you identify the newly created one here? based on timestamp?
        },
        onSuccess: mutationProps?.onSuccess,
        onError: mutationProps?.onError,
    });
}
export const useCreateProjectWorkflowRequestMutation = (
    mutationProps?: CreateProjectWorkflowRequestMutationProps
) => {
    const queryClient = useQueryClient();
    return useMutation({
        mutationFn: async (request: CreateProjectWorkflowRequest) => {
            // This is assuming it's returning project, otherwise you could get it from request
            // also you should prob initialize your ProjectsApi only once
            const project = await new ProjectsApi().createProjectWorkflow(request);
            const workflows = await new ProjectsApi().getProjectWorkflowsQuery(project.id);
            // this will update the workflows in the cache for the project
            queryClient.setQueryData(['workflows', { projectId; project.id }], workflows);
            return { project, workflows }; // how do you identify the newly created one here? based on timestamp?
        },
        onSuccess: mutationProps?.onSuccess,
        onError: mutationProps?.onError,
    });
}
fair-rose
fair-roseOP•3y ago
// how do you identify the newly created one here? based on timestamp?
Last item in array
typical-coral
typical-coral•3y ago
you should have access to it in the onSuccess callback now
fair-rose
fair-roseOP•3y ago
i think i do, yes, thank you, I'll hit you up here if I can't finish it off

Did you find this page helpful?