如何让SWR仅在用户修改日期范围时发起数据请求并减少重复查询次数

我明白你遇到的问题——SWR默认的缓存策略有时候会导致不必要的重复请求，尤其是当组件频繁重渲染但你的数据只需要在时间区间变化时更新。你想通过useEffect监听dateRange来控制请求触发的思路是对的，下面我给你两种可行的实现方案，其中一种是你想要的useEffect方式，另一种是更贴合SWR设计理念的简化方案。

方案一：使用useEffect手动触发请求 #

我们需要先关闭SWR的自动重验证机制，避免它在组件重渲染、窗口聚焦等场景下自动发起请求，然后通过useEffect监听dateRange的变化，手动调用mutate来触发新的请求。

修改后的完整代码如下：

import useSWR, { mutate } from 'swr';
import { useState, useEffect } from 'react';
import { apiRequest } from '../../../util/util';
import { format } from 'date-fns';
import groupBy from 'lodash/groupBy';

const fetchSentiment = async (url) => {
  let sentiments = await apiRequest(url);
  sentiments = sentiments.map((el) => ({
    ...el,
    createdDay: format(new Date(el.created * 1000), 'yyyy-MM-dd'),
  }));
  return groupBy(sentiments, 'createdDay');
};

// 封装URL生成逻辑，避免重复代码
const getRequestUrl = (startDate, endDate) => `xxx=${startDate}&endTime=${endDate}`;

export default function useAnalytics() {
  let d = new Date();
  d.setMonth(d.getMonth() - 1);
  const [dateRange, setDateRange] = useState([d.getTime(), Date.now()]);
  const [startDate, endDate] = dateRange;

  // 配置SWR禁用自动重验证，只在我们主动触发时请求
  const swrConfig = {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
  };

  const { data: sentimentData, error: sentimentError } = useSWR(
    getRequestUrl(startDate, endDate),
    fetchSentiment,
    swrConfig
  );

  const { data: expressionsData, error: expressionsError } = useSWR(
    getRequestUrl(startDate, endDate),
    apiRequest,
    swrConfig
  );

  // 监听dateRange变化，手动触发数据更新
  useEffect(() => {
    // 调用mutate触发对应URL的重新请求
    mutate(getRequestUrl(startDate, endDate));
  }, [dateRange, startDate, endDate]); // 依赖dateRange确保只有时间区间变化时触发

  // 统一错误处理
  if (sentimentError || expressionsError) {
    console.error('数据请求失败:', sentimentError || expressionsError);
  }

  return {
    sentimentData,
    expressionsData,
    // 注意：原代码中的`overall`未定义，记得补充实现或移除
    handleChange: (e) => {
      if (e[0] && e[1]) { // 简化空值判断
        setDateRange([e[0].getTime(), e[1].getTime()]);
      }
    },
    setDateRange,
    startDate,
    endDate,
  };
}

关键改动说明：

1. 关闭SWR自动重验证：通过swrConfig设置三个revalidate选项为false，彻底避免SWR在非必要场景下发起请求。
2. 封装URL生成：把重复的URL拼接逻辑抽成函数，减少代码冗余，也方便mutate时复用。
3. useEffect监听dateRange：只有当dateRange变化时，才调用mutate触发新的请求，完全符合你“仅时间区间变化时更新”的需求。
4. 简化handleChange逻辑：优化了空值判断，去掉了不必要的变量赋值。

方案二：更简洁的SWR原生方案（推荐） #

其实你不需要额外的useEffect，因为SWR的核心机制就是基于key的变化触发请求。我们只需要把请求key设置为依赖dateRange的动态值，再配合禁用自动重验证的配置，就能实现同样的效果，代码更简洁：

// 移除useEffect部分，修改SWR的key为动态生成
const { data: sentimentData, error: sentimentError } = useSWR(
  // 用函数返回key，确保每次start/endDate变化时key更新
  () => getRequestUrl(startDate, endDate),
  fetchSentiment,
  swrConfig
);

const { data: expressionsData, error: expressionsError } = useSWR(
  () => getRequestUrl(startDate, endDate),
  apiRequest,
  swrConfig
);

为什么推荐这个方案？

• 更贴合SWR的设计理念：SWR本来就是通过key的变化来管理请求和缓存的，不需要额外的状态或副作用。
• 代码更简洁：去掉了useEffect和手动mutate的逻辑，减少了出错的可能。
• 同样能保证只有dateRange变化时才发起新请求，因为key会随着startDate/endDate的变化而变化，触发SWR重新请求。

原代码问题分析 #

你之前用shouldFetch状态的方式，可能导致以下问题：

1. handleChange中同时调用setDateRange和setShouldFetch(true)，会导致组件两次重渲染，可能触发不必要的请求。
2. 当组件因为其他原因（比如父组件重渲染）重新渲染时，shouldFetch一直为true，SWR默认的stale-while-revalidate机制会发起验证请求，导致重复请求。

通过上面的两种方案，都能彻底解决这些问题，让请求只在时间区间变化时触发。

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