React Admin+GraphQL 出现重复/多余API请求，寻求排查帮助

问题分析 #

使用React Admin结合GraphQL搭建后台时，切换页码或切换资源时出现重复API调用：点击页码会同时发起前一页和当前页的两次请求，推测与缓存机制或组件重渲染触发重复数据获取有关。

解决方案 #

1. 调整GraphQL数据提供器的缓存策略 #

官方ra-data-graphql-simple默认的fetchPolicy可能导致重复请求，可修改数据提供器配置，指定合适的获取策略：

import { buildGraphQLProvider } from 'ra-data-graphql-simple';
import { InMemoryCache } from '@apollo/client';

const dataProvider = await buildGraphQLProvider({
    clientOptions: {
        uri: '/your-graphql-endpoint',
        cache: new InMemoryCache(),
        defaultOptions: {
            query: {
                // 根据业务需求选择：cache-first优先用缓存，network-only强制走网络
                fetchPolicy: 'cache-first',
            },
        },
    },
});

2. 避免List组件的不稳定props传递 #

检查父组件中传递给List的props，确保不会每次渲染都生成新的对象/组件：

• 不要在组件内部定义TitleFilter（否则每次渲染都会创建新组件实例，触发List重渲染）
• 确保filters、actions等props是稳定引用

错误示例：

const MyResourceList = (props) => {
    // 每次渲染都会创建新的TitleFilter组件
    const TitleFilter = () => (
        <Filter>
            <TextInput source="title" label="搜索标题" />
        </Filter>
    );
    return <List {...props} filters={TitleFilter} actions={false} />;
};

正确示例：

// 把过滤器组件定义在外部，保持引用稳定
const TitleFilter = () => (
    <Filter>
        <TextInput source="title" label="搜索标题" />
    </Filter>
);

const MyResourceList = (props) => {
    return <List {...props} filters={TitleFilter} actions={false} />;
};

3. 检查React Admin版本 #

部分旧版本的React Admin与GraphQL数据提供器存在重复请求的bug，升级到最新稳定版（如React Admin 4.x系列）可能直接解决问题。

4. 自定义Pagination组件（可选） #

如果默认Pagination组件存在状态触发问题，可自定义分页组件，确保页码变更只触发一次数据请求：

import { Pagination as RaPagination } from 'react-admin';

const CustomPagination = (props) => {
    // 自定义逻辑，确保页码变更时只触发一次数据获取
    return <RaPagination {...props} />;
};

// 在List中使用
<List {...props} pagination={<CustomPagination />}>
    {/* ...Datagrid */}
</List>

请求截图说明 #

• 点击第2页时，网络请求同时发起了两次GraphQL查询：一次请求第1页数据，一次请求第2页数据
• 两次请求的参数中，页码参数分别为1和2，确认是重复的分页请求

内容的提问来源于stack exchange，提问作者Yashwanth Kata