如何在RTK Query中使用本地JSON数据模拟接口？

方法1：使用官方fakeBaseQuery构建模拟API切片 #

RTK Query提供的fakeBaseQuery是专门用于无真实后端场景的官方方案，完全贴合RTK Query语法，后续替换真实API时几乎不需要修改组件代码。

步骤：

1. 导入本地JSON模拟数据
2. 创建API切片时指定fakeBaseQuery作为baseQuery
3. 定义endpoints，在query函数中直接返回模拟数据

代码示例：

import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react';
import mockUsers from './mockUsers.json'; // 本地JSON文件

export const mockApi = createApi({
  reducerPath: 'mockApi',
  baseQuery: fakeBaseQuery(),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => ({ data: mockUsers }), // 直接返回本地JSON数据
    }),
    getUserById: builder.query({
      query: (userId) => ({
        data: mockUsers.find(user => user.id === userId)
      }),
    }),
  }),
});

// 生成hooks，组件中直接使用
export const { useGetUsersQuery, useGetUserByIdQuery } = mockApi;

组件调用方式和真实API完全一致：

function UserList() {
  const { data: users, isLoading } = useGetUsersQuery();
  
  if (isLoading) return <div>Loading...</div>;
  
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

后续后端API就绪后，只需把baseQuery替换为真实的fetchBaseQuery，修改endpoints的query为真实API路径即可，组件代码无需改动。

方法2：自定义baseQuery实现环境自动切换 #

如果需要在开发环境用本地JSON、生产环境自动切换真实API，可以自定义baseQuery：

代码示例：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import mockUsers from './mockUsers.json';

const customBaseQuery = async (args, api, extraOptions) => {
  if (process.env.NODE_ENV === 'development') {
    // 开发环境返回本地JSON
    let data;
    if (args.url === '/users') {
      data = mockUsers;
    } else if (args.url.startsWith('/users/')) {
      const userId = args.url.split('/')[2];
      data = mockUsers.find(user => user.id === userId);
    }
    return { data };
  }
  // 生产环境使用真实API
  const baseQuery = fetchBaseQuery({ baseUrl: '/api' });
  return baseQuery(args, api, extraOptions);
};

export const api = createApi({
  reducerPath: 'api',
  baseQuery: customBaseQuery,
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => ({ url: '/users' }),
    }),
    getUserById: builder.query({
      query: (userId) => ({ url: `/users/${userId}` }),
    }),
  }),
});

export const { useGetUsersQuery, useGetUserByIdQuery } = api;

这种方式无需修改组件调用逻辑，通过环境变量自动切换数据源，完全符合RTK Query规范，避免了传统Redux action的冗余工作。

为什么不推荐旧方法？ #

如果用传统Redux action分发本地数据，后续切换RTK Query时，需要替换所有组件中的状态获取逻辑（比如从useSelector改成useQuery），会产生大量重复代码。而上述两种方案完全基于RTK Query架构，组件层调用逻辑一致，后续迁移成本极低。

内容的提问来源于stack exchange，提问作者MOHD SAQUIB