T
TanStack•3y ago
afraid-scarlet

How to best save the data I get from an useMutation to later use.

Ok so I getting some data from an useMutation and I'm thinking on storing this data inside an React.Context provider to later use through my application, but maybe I don't need to do this since I could queryClient.setQueryData but I'm not too sure about this? I have the following mutation that I use on one of my components 
async function getOmgevingscheck(bodyProps: IBodyProps) {
  const { data: response } = await omgevingscheckApi.post(
    '/rs/v1/omgevingscheck',
    constructOmgevingscheckPostRequest(bodyProps),
  );
  return response;
}

export function useOmgevingscheckMutation(bodyProps: IBodyProps) {
  const { wkt } = bodyProps;
  return useMutation(['useOmgevingscheckMutation', { wkt }], () =>
    getOmgevingscheck(bodyProps),
  );
}
async function getOmgevingscheck(bodyProps: IBodyProps) {
  const { data: response } = await omgevingscheckApi.post(
    '/rs/v1/omgevingscheck',
    constructOmgevingscheckPostRequest(bodyProps),
  );
  return response;
}

export function useOmgevingscheckMutation(bodyProps: IBodyProps) {
  const { wkt } = bodyProps;
  return useMutation(['useOmgevingscheckMutation', { wkt }], () =>
    getOmgevingscheck(bodyProps),
  );
}
This is how I use it on the component itself 
function SomeComponent () {

  const useMutation = useOmgevingscheckMutation({
    wkt: polygonWktStringFromCtx?.polygonWktString,
  });
  
  const handleOmgevingscheckUitvoeren = () => {
    useMutation.mutate();
    setStep({ step: 'thema' });
  };

  
  return (
    <> 
      <MobileForm onSubmit={handleOmgevingscheckUitvoeren} />

      {useMutation.isLoading &&  ...some code}
      {useMutation.isError &&  ...some code}

  
  { useMutation.isSuccess &&
    useMutation.data.map((omgevingscheckItem: IOmgevingscheckThema) => (
      omgevingscheckItem.map(data =>
        data.map(secondLayerNestedData =>
          secondLayerNestedData.map(thirdLayerNestedData => (
            <>
              <div>{thirdLayerNestedData.name}</div>
            </>
          )),
        ),
      )
    ))      
  }
    </>
  )
} 
function SomeComponent () {

  const useMutation = useOmgevingscheckMutation({
    wkt: polygonWktStringFromCtx?.polygonWktString,
  });
  
  const handleOmgevingscheckUitvoeren = () => {
    useMutation.mutate();
    setStep({ step: 'thema' });
  };

  
  return (
    <> 
      <MobileForm onSubmit={handleOmgevingscheckUitvoeren} />

      {useMutation.isLoading &&  ...some code}
      {useMutation.isError &&  ...some code}

  
  { useMutation.isSuccess &&
    useMutation.data.map((omgevingscheckItem: IOmgevingscheckThema) => (
      omgevingscheckItem.map(data =>
        data.map(secondLayerNestedData =>
          secondLayerNestedData.map(thirdLayerNestedData => (
            <>
              <div>{thirdLayerNestedData.name}</div>
            </>
          )),
        ),
      )
    ))      
  }
    </>
  )
}
What I would like to know is: 1. Is there a better way to persist the data I get back from the mutation so I could later called it with an useQuery hook or should I just save it inside Context.Provider? 2. maybe I should use queryClient.setQueryData to set the result of my mutation into the query client ?
4 Replies
noble-gold
noble-gold•3y ago
I could be wrong but I think useQuery calls an endpoint and stores it in the cache with specified queryKey, later you can access those data via the queryKey with useQueryClient. So in my understanding if you are not using it that way, maybe it's better to useContext or localStorage.
afraid-scarlet
afraid-scarletOP•3y ago
ok so I changed my custom useMutation to from this 
export function useOmgevingscheckMutation(bodyProps: IBodyProps) {
  const { wkt } = bodyProps;
  return useMutation(['useOmgevingscheckMutation', { wkt }], () =>
    getOmgevingscheck(bodyProps),
  );
}
export function useOmgevingscheckMutation(bodyProps: IBodyProps) {
  const { wkt } = bodyProps;
  return useMutation(['useOmgevingscheckMutation', { wkt }], () =>
    getOmgevingscheck(bodyProps),
  );
}
to this 
export function useOmgevingscheckMutation(bodyProps: IBodyProps) {
  const queryClient = useQueryClient();

  const { wkt } = bodyProps;

  return useMutation(() => getOmgevingscheck(bodyProps), {
    onSuccess: (data: IOmgevingscheckThema[]) => {
      const cacheKey = ['useOmgevingscheckMutation', { wkt }];
      queryClient.setQueryData(cacheKey, data);
    },
  });
}
export function useOmgevingscheckMutation(bodyProps: IBodyProps) {
  const queryClient = useQueryClient();

  const { wkt } = bodyProps;

  return useMutation(() => getOmgevingscheck(bodyProps), {
    onSuccess: (data: IOmgevingscheckThema[]) => {
      const cacheKey = ['useOmgevingscheckMutation', { wkt }];
      queryClient.setQueryData(cacheKey, data);
    },
  });
}
Now the value that I used to execute the mutation (do the post request) gets cached with a valid cacheKey, this is great, but now what I would like is a way to cached the result of that mutation. Is this possible with an useMutation I know it is possible with an useQuery like you mentioned @Annie , but could I do the same thing with an useMutation ?
rival-black
rival-black•3y ago
As far as I know this should work? The data param of onSuccess contains the result of the mutation, so it seems you're already caching it?
afraid-scarlet
afraid-scarletOP•3y ago
@julien you are right, I got it on the data param, now to put this inside the ctx

Did you find this page helpful?