通过另一个变异来使一个变异自动重新获取数据,通过使其标记无效。

huangapple go评论68阅读模式
英文:

Auto-refetch a mutation by invalidating its tag from another mutation

问题

我可以在下面的代码中通过使其标签失效来自动重新获取getEmployees变异吗?

现在当我调用deleteEmployee变异时,getEmployees变异不会运行。

我知道我应该使用GET请求从服务器获取数据,但由于一些安全性问题,这无法更改。

英文:

Can I auto-refetch getEmployees mutation by invalidating its tag from another mutation called deleteEmployee in the code below?

import { createApi } from '@reduxjs/toolkit/query/react'
import customFetchBase from './customFetchBase.js'

export const publicApi = createApi({
  reducerPath: 'publicApi',
  baseQuery: customFetchBase,
  tagTypes: ['employees'],
  endpoints: builder => ({
    getEmployees: builder.mutation({
      query: ({
        formData = "defaultHashedDataString",
        salt = "xyz",
        pageIndex = 1
      }) => ({
        url: '/Hafez/Employee/Data',
        method: 'POST',
        body: {
          RequestVerificationToken: salt,
          FormData: formData,
          currentPage: pageIndex + 1
        }
      }),
      providesTags: ['employees']
    }),
    deleteEmployee: builder.mutation({
      query: ({ formData, salt }) => ({
        url: '/Hafez/Employee/Delete',
        method: 'POST',
        body: { RequestVerificationToken: salt, FormData: formData }
      }),
      invalidatesTags: ['employees']
    })
  })
})

export const { useGetEmployeesMutation, useDeleteEmployeeMutation } = publicApi

Now when I call deleteEmployee mutation the getEmployees mutation does not run.

I know that I should use a GET request for getting data from server but for some security it can't be changed.

答案1

得分: 0

查询提供标签,突变使其失效。我觉得 getEmployees 应该是一个查询而不是一个突变。当成功使 "employees" 标签失效时,调用 deleteEmployee 端点,那么任何当前订阅 now useGetEmployeesQuery 钩子的订阅者将自动触发 getEmployees 查询进行重新获取。

export const publicApi = createApi({
  reducerPath: 'publicApi',
  baseQuery: customFetchBase,
  tagTypes: ['employees'],
  endpoints: builder => ({
    getEmployees: builder.query({ // <-- 更新为查询
      query: ({
        formData = "defaultHashedDataString",
        salt = "xyz",
        pageIndex = 1
      }) => ({
        url: '/Hafez/Employee/Data',
        method: 'POST',
        body: {
          RequestVerificationToken: salt,
          FormData: formData,
          currentPage: pageIndex + 1
        }
      }),
      providesTags: ['employees']
    }),
    deleteEmployee: builder.mutation({
      query: ({ formData, salt }) => ({
        url: '/Hafez/Employee/Delete',
        method: 'POST',
        body: { RequestVerificationToken: salt, FormData: formData }
      }),
      invalidatesTags: ['employees']
    })
  })
});

export const {
  useGetEmployeesQuery, // <-- 更新后的钩子名称
  useDeleteEmployeeMutation
} = publicApi;

请注意,端点可以是查询或突变,这与请求方法完全独立,例如 GETPOSTPUT 等。

英文:

Queries provide tags, mutations invalidate them. It seems to me that getEmployees should be a query instead of a mutation. When the deleteEmployee endpoint is called and successfully invalidates the "employees" tag, then any current subscribers to the now useGetEmployeesQuery hook will automatically trigger the getEmployees query to refetch.

export const publicApi = createApi({
  reducerPath: 'publicApi',
  baseQuery: customFetchBase,
  tagTypes: ['employees'],
  endpoints: builder => ({
    getEmployees: builder.query({ // <-- update to query
      query: ({
        formData = "defaultHashedDataString",
        salt = "xyz",
        pageIndex = 1
      }) => ({
        url: '/Hafez/Employee/Data',
        method: 'POST',
        body: {
          RequestVerificationToken: salt,
          FormData: formData,
          currentPage: pageIndex + 1
        }
      }),
      providesTags: ['employees']
    }),
    deleteEmployee: builder.mutation({
      query: ({ formData, salt }) => ({
        url: '/Hafez/Employee/Delete',
        method: 'POST',
        body: { RequestVerificationToken: salt, FormData: formData }
      }),
      invalidatesTags: ['employees']
    })
  })
});

export const {
  useGetEmployeesQuery, // <-- updated hook name
  useDeleteEmployeeMutation
} = publicApi;

Please note that the endpoints are either queries or mutations and that this is completely independent from the request method, e.g. GET, POST, PUT, etc.

huangapple
  • 本文由 发表于 2023年5月28日 22:21:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/76351954.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定