如何在你的ReactJS应用程序中使用useMutation和React Query发布数据（附代码示例）

咱们现已学习了在运用react query与服务器通信时怎么运用useQuery和结构化你的应用程序。这次咱们将学习怎么以无缝的用户体会将数据发送到你的服务器。让咱们直接进入这个坏小子。

为什么运用骤变？

与查询十分不同，骤变能够用来发布、删去或更新你的数据与反应查询，甚至来自你的服务器的任何副作用。而useMutation是用来履行这个的钩子。

useMutation在举动中

按照脚手架指南中的层模式，咱们将在咱们的 api.js层中写成

const addPlanet = async (data) => {
  const { name } = data;
  const body = { name };
  return axiosInstance({
    url: "planets",
    method: "POST",
    data: body,
  }).then(({ data }) => {
    return data;
  });
};

一旦咱们预备好了api层，咱们就能够在咱们的自定义钩子中运用它了 钩子.js作为

const useAddPlanet = () => {
  const queryClient = useQueryClient();
  queryClient.setMutationDefaults(["add-planet"], {
    mutationFn: (data) => addPlanet(data),
    onMutate: async (variables) => {
      const { successCb, errorCb } = variables;
      return { successCb, errorCb };
    },
    onSuccess: (result, variables, context) => {
      if (context.successCb) {
        context.successCb(result);
      }
    },
    onError: (error, variables, context) => {
      if (context.errorCb) {
        context.errorCb(error);
      }
    },
  });
  return useMutation(["add-planet"]);
};

咱们正在设置咱们的骤变默认值，第一个参数是查询键，然后是咱们的骤变函数，就像咱们在 react query 中做的那样。这里的新成员是onMutate、onSuccess和onError：

• onMutate： 在骤变时，能够用来处理恳求过程中的一些副作用。
• onSuccess： 在成功时，用于在恳求被成功送达时做一些改变。
• onError： 在过错发生时，用于处理你的恳求失利或让咱们说有一些过错，如404。

然后，咱们用useMutation回来咱们的骤变与查询键。

耗费咱们的骤变

现在要在咱们的组件内耗费咱们的骤变钩子，咱们能够做一些工作，如

  const addPlanetMutation = useAddPlanet();

并在回调到咱们的增加按钮时，咱们能够这样做

  // ADD PLANET
  function handleAddPlanet() {
    const planetName = newPlanetInput.current.value;
    if (planetName === "") {
      return;
    }
    const mutationArgs = {
      name: newPlanetInput.current.value,
      successCb,
      errorCb,
    };
    addPlanetMutation.mutate(mutationArgs);
    newPlanetInput.current.value = null;
  }

咱们现已预备好了骤变参数，作为mutationsArgs，在这些参数中，咱们有成功和过错的回调，将在咱们的自定义钩子中调用。

成功和过错回调

在咱们的过错回调中，咱们能够增加一些警告或奉告用户他们刚刚提出的恳求现已失利，在咱们的成功回调中，咱们获取咱们的数据。

什么是invalidateQueries？

当咱们试图在一些副作用中再次获取咱们的数据时，Invalidate查询就十分有用了。咱们能够通过查询键作为参数，告诉反应查询到底是哪个恳求或哪个缓存的数据需要再次获取：

  const successCb = () => {
    queryClient.invalidateQueries(["get-planets"]);
  };
  const errorCb = () => {};

无效查询加载

一旦咱们的查询无效，咱们就必须向用户显现某种指标，标明数据正在被获取，这也是由react query提供的

  const { data, isLoading, isFetching } = usePlanets();

isFetching是用来再次显现加载器的，还有addPlanetMuttion.isLoading：

  {isLoading || addPlanetMutation.isLoading || isFetching ? (
      <InfinitySpin width="500" color="blue" />
  ) : (
  // SHOW COMPONENT
  )

bobs your uncle

收起來

OUFFFF

。这篇文章很长，但我期望你能在我身边坚持到最后，因为假如你得到了这一点，它也能够在你的reactJS应用中真正派上用场。这次就到这里，我期望能在下一次见到你。所以这并不是一个告别。