快捷導(dǎo)航

使用useMutation和React Query發(fā)布數(shù)據(jù)demo

更新時(shí)間：2022年12月13日 11:55:27 作者：Jovie

這篇文章主要為大家介紹了使用useMutation和React Query發(fā)布數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

我們已經(jīng)學(xué)習(xí)了在使用react query與服務(wù)器通信時(shí)如何使用useQuery和結(jié)構(gòu)化你的應(yīng)用程序。這次我們將學(xué)習(xí)如何以無(wú)縫的用戶體驗(yàn)將數(shù)據(jù)發(fā)送到你的服務(wù)器。讓我們直接進(jìn)入這個(gè)壞小子。

為什么使用突變？

與查詢非常不同，突變可以用來(lái)發(fā)布、刪除或更新你的數(shù)據(jù)與反應(yīng)查詢，甚至來(lái)自你的服務(wù)器的任何副作用。而useMutation是用來(lái)執(zhí)行這個(gè)的鉤子。

useMutation在行動(dòng)中

按照腳手架指南中的層模式，我們將在我們的 api.js層中寫(xiě)成

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

一旦我們準(zhǔn)備好了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"]);
};

我們正在設(shè)置我們的突變默認(rèn)值，第一個(gè)參數(shù)是查詢鍵，然后是我們的突變函數(shù)，就像我們?cè)?react query 中做的那樣。這里的新成員是onMutate、onSuccess和onError：

onMutate：在突變時(shí)，可以用來(lái)處理請(qǐng)求過(guò)程中的一些副作用。
onSuccess：在成功時(shí)，用于在請(qǐng)求被成功送達(dá)時(shí)做一些改變。
onError：在錯(cuò)誤發(fā)生時(shí)，用于處理你的請(qǐng)求失敗或讓我們說(shuō)有一些錯(cuò)誤，如404。

然后，我們用useMutation返回我們的突變與查詢鍵。

消耗我們的突變

現(xiàn)在要在我們的組件內(nèi)消耗我們的突變鉤子，我們可以做一些事情，如

  const addPlanetMutation = useAddPlanet();

并在回調(diào)到我們的添加按鈕時(shí)，我們可以這樣做

  // 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;
  }

我們已經(jīng)準(zhǔn)備好了突變參數(shù)，作為mutationsArgs，在這些參數(shù)中，我們有成功和錯(cuò)誤的回調(diào)，將在我們的自定義鉤子中調(diào)用。

成功和錯(cuò)誤回調(diào)

在我們的錯(cuò)誤回調(diào)中，我們可以添加一些警告或告知用戶他們剛剛提出的請(qǐng)求已經(jīng)失敗，在我們的成功回調(diào)中，我們獲取我們的數(shù)據(jù)。

什么是invalidateQueries？

當(dāng)我們?cè)噲D在一些副作用中再次獲取我們的數(shù)據(jù)時(shí)，Invalidate查詢就非常有用了。我們可以通過(guò)查詢鍵作為參數(shù)，告訴反應(yīng)查詢到底是哪個(gè)請(qǐng)求或哪個(gè)緩存的數(shù)據(jù)需要再次獲?。?/p>

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

無(wú)效查詢加載

一旦我們的查詢無(wú)效，我們就必須向用戶顯示某種指標(biāo)，表明數(shù)據(jù)正在被獲取，這也是由react query提供的

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

isFetching是用來(lái)再次顯示加載器的，還有addPlanetMuttion.isLoading：

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

bobs your uncle

以上就是使用useMutation和React Query發(fā)布數(shù)據(jù)demo的詳細(xì)內(nèi)容，更多關(guān)于useMutation React Query發(fā)布數(shù)據(jù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: