extended-salmon

TanstackQuery useMutation example

Hey folks, would like your takes/assistance on a silly one. I'm using TSQ for a small SolidJS project and I'm trying to create a mutation but it seems like the newer version does not support the previous version in which we passed a mutationFn and a mutationKey . This is the way I usually go about it. I've got the follow function to create a thing:

const createThing = async (thing: object) => {
  try {
    return await callPost("/create-thing", thing);
  } catch (error) {
    return handleApiError(error as AxiosError);
  }
};

const createThing = async (thing: object) => {
  try {
    return await callPost("/create-thing", thing);
  } catch (error) {
    return handleApiError(error as AxiosError);
  }
};

And I'm trying to create a new mutation using the following:

function useCreateThingMutation() {
  return createMutation({
    mutationKey: ["createThing"],
    mutationFn: createThing,
  });
}

function useCreateThingMutation() {
  return createMutation({
    mutationKey: ["createThing"],
    mutationFn: createThing,
  });
}

But what i'm getting is an error stating that both mutationKey and mutationFn does not exist in our types anymore....Also the examples in the docs do not cover mutation creation anymore. How did ya'll work your way around this change? P.S. Using "@tanstack/solid-query": "^5.59.17", Edit: I know I can just use createQuery and achieve the same?? result but I really liked how we had separate actions to handle data fetching and data manipulation.

2 Replies

extended-salmonOP•12mo ago

Found a solution, it was a silly one. We now create the mutation in the following way:

function useCreateThingMutation() {
    return createMutation(() => ({
        mutationKey: ["createThing"],
        mutationFn: createThing,
    }));
}

function useCreateThingMutation() {
    return createMutation(() => ({
        mutationKey: ["createThing"],
        mutationFn: createThing,
    }));
}

Had to dig in a bit into the src. Keeping the post up just in case there are other folks like me in the future.

itchy-amethyst•9mo ago

Does this support optimistic updates? The say this is supported but don't provide any examples https://tanstack.com/query/latest/docs/framework/solid/overview#well-that-seems-like-more-lines-of-code-to-do-the-same-thing

Gaming

Programming

TanstackQuery useMutation example

Did you find this page helpful?