How to call RTK mutations after first finishes

Question

I am using REDUX-TOOLKIT-QUERY, Now I have a situation, I have to call one mutation. once that mutation returns a response, and I have to use that response in the other three mutations as a request parameter. How can we implement this in a proper way?

const [getSettings, { isLoading, data: Settings }] =useSettingsMutation();
  const [getMenu] =useMenuMutation();
  const [getServices] = useServicesMutation();
  useEffect(() => {
    const obj = {
      Name: "someNme",
    };
    if (obj) getSettings(obj);
    if (Settings?._id ) {
      const id = settings._id;
       getServices(id);
     getMenu(id);
     getServices(id);
    }
  }, []);

score 1 · Answer 1 · answered Sep 14 '22 at 04:03

useMutation will return a promise, you can directly await this promise to get the return result:

const [getSettings, { isLoading, data: Settings }] = useSettingsMutation()
const [getMenu] = useMenuMutation()
const [getServices] = useServicesMutation()
useEffect(() => {
  ;(async () => {
    try {
      const obj = {
        Name: 'someNme',
      }
      const data = await getSettings(obj).unwrap()
      if (data._id !== undefined) {
        const id = data._id
        getServices(id)
        getMenu(id)
        getServices(id)
        // ...
      }
    } catch (err) {
      // ...
    }
  })()
}, [])

How to call RTK mutations after first finishes

1 Answers1