使用具有模块结构的 RTK 查询并在一个组件中调用多个 api 覆盖以前的 url 和值

Question

我正在使用模块化结构的 RTK 查询。所以我不需要为每个 url 编写端点。问题是如果我在一个组件中调用两个 api 调用最近的调用覆盖前一个。

JobformContainer.jsx

import clients from '../../redux/modules/clients';
import yupSchemaService from '../../services/yupSchemaService';
import dataService from '../../services/dataService';
import { fetchAutoCompleteData } from '../../services/autoCompleteService';
import jobs from '../../redux/modules/jobs';
  const {
    data: jobData,
    error: jobError,
    isFetching: jobLoading,
  } = jobs.list().useJobDetailQuery({
    params: { id: params.jobId },
    extendedPath: apiUrls.getJob(),
    skip: !params.jobId,
  });

  const {
    data: clientsList,
    isFetching: isLoadingClient,
    error: errorClient,
    isSuccess: successClient,
  } = clients
    .list()
    .useListQuery(
      { params: '', extendedPath: apiUrls.getClientListing() },
      { refetchOnMountOrArgChange: true },
    );

  const [createJob, createJobData] = jobs.form().useCreateMutation();

Client.js 客户 api 来电

import form from '../apiService/form';
import list from '../apiService/list';
import destroy from '../apiService/destroy';

const clients = {};
clients.list = () => list('/rest/clients', 'clients');
clients.form = () => form('/rest/clients', 'clients');
clients.delete = () => destroy('/rest/clients/delete', 'clients');

export default clients;

jobs.js 作业模块 api 调用

import _ from 'lodash';
import form from '../apiService/form';
import list from '../apiService/list';

const jobs = {};
jobs.list = () => list('/rest/jobs', 'job');
jobs.form = () => form('/rest/jobs', 'job');

export default jobs;

list.js 是 rtk 的代码拆分，我在其中注入端点

import { authHeader } from '../../constants/authenticationHeader';
import { baseSliceWithTags } from '../baseSlice';

const list = (path, module) => {
  const listApi = baseSliceWithTags.injectEndpoints({
    endpoints: (builder) => {
      return {
        list: builder.query({
          query: (payload) => {
            return {
              url: path + (payload?.extendedPath || ''),
              method: 'get',
              csrf: authHeader(),
              params: payload?.params,
            };
          },
          providesTags: [module],
        }),
        detail: builder.query({
          query: (payload) => ({
            url: path + (payload?.extendedPath || ''),
            method: 'get',
            csrf: authHeader(),
            params: payload?.params,
          }),
          providesTags: [module],

          keepUnusedDataFor: 0,
        }),
      };
    },
    overrideExisting: true,
  });
  return listApi;
};
export default list;

Network calls

在网络中，所有调用都是 /clients 模块调用，即使我已经调用了 jobs 模块，但它是使用客户端参数调用的。

Answer 1

您的端点需要 api 的唯一名称，因此 clientList 和 formList。

明确一点：您正在 注入同一个 api。这并不是每次都给你新的钩子，如果你注入一个同名的新端点，它会覆盖内部配置和 returns 相同的钩子。

当你这样做的时候，它们会互相覆盖。这也是您收到错误消息的原因，除非您激活 overrideExisting: true.

本质上，RTK 查询是在警告您不应该这样做，但您还是这样做了 ;)

使用具有模块结构的 RTK 查询并在一个组件中调用多个 api 覆盖以前的 url 和值

Using RTK query with modules structure and calling multiple apis in one component overrides the previous previous url and values

reactjs

redux-toolkit

rtk-query