Tanstack Query：从其他组件激活依赖查询

以下是几种更轻量的实现方式，无需引入复杂状态管理库：

方案1：利用共同父组件传递状态（优先推荐，最简单） #

如果两个组件有共同的父组件，直接在父组件维护激活状态，通过props传递给子组件即可：

// 父组件
import { useState } from 'react';
import QueryComponent from './QueryComponent';
import ActivatorComponent from './ActivatorComponent';

function ParentComponent() {
  const [isQueryEnabled, setIsQueryEnabled] = useState(false);

  return (
    <div>
      <QueryComponent isEnabled={isQueryEnabled} />
      <ActivatorComponent onActivate={() => setIsQueryEnabled(true)} />
    </div>
  );
}

// 查询组件（QueryComponent）
import { useQuery } from '@tanstack/react-query';

function QueryComponent({ isEnabled }) {
  const { data } = useQuery({
    queryKey: ['my-data'],
    queryFn: () => fetch('/api/data').then(res => res.json()),
    enabled: isEnabled // 默认禁用，由父组件状态控制
  });

  return <div>{data ? JSON.stringify(data) : '查询未激活'}</div>;
}

// 激活组件（ActivatorComponent）
function ActivatorComponent({ onActivate }) {
  return <button onClick={onActivate}>激活查询</button>;
}

方案2：用React Context（无共同父组件时使用） #

如果两个组件层级较深或无共同父组件，用轻量的Context共享状态，比状态管理库简洁得多：

// 创建Context文件 QueryActivationContext.js
import { createContext, useContext, useState } from 'react';

const QueryActivationContext = createContext();

export function QueryActivationProvider({ children }) {
  const [isQueryEnabled, setIsQueryEnabled] = useState(false);
  const enableQuery = () => setIsQueryEnabled(true);

  return (
    <QueryActivationContext.Provider value={{ isQueryEnabled, enableQuery }}>
      {children}
    </QueryActivationContext.Provider>
  );
}

export function useQueryActivation() {
  return useContext(QueryActivationContext);
}

// 根组件包裹Provider
import { QueryActivationProvider } from './QueryActivationContext';

function App() {
  return (
    <QueryActivationProvider>
      {/* 你的应用组件，包含QueryComponent和ActivatorComponent */}
    </QueryActivationProvider>
  );
}

// 查询组件使用
import { useQuery } from '@tanstack/react-query';
import { useQueryActivation } from './QueryActivationContext';

function QueryComponent() {
  const { isQueryEnabled } = useQueryActivation();
  const { data } = useQuery({
    queryKey: ['my-data'],
    queryFn: () => fetch('/api/data').then(res => res.json()),
    enabled: isQueryEnabled
  });

  return <div>{data ? JSON.stringify(data) : '查询未激活'}</div>;
}

// 激活组件使用
import { useQueryActivation } from './QueryActivationContext';

function ActivatorComponent() {
  const { enableQuery } = useQueryActivation();
  return <button onClick={enableQuery}>激活查询</button>;
}

方案3：URL参数控制（需要持久化状态时使用） #

如果需要将激活状态持久化或跨页面生效，可借助URL查询参数实现：

// 查询组件
import { useQuery } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';

function QueryComponent() {
  const [searchParams] = useSearchParams();
  const isQueryEnabled = searchParams.get('enableQuery') === 'true';

  const { data } = useQuery({
    queryKey: ['my-data'],
    queryFn: () => fetch('/api/data').then(res => res.json()),
    enabled: isQueryEnabled
  });

  return <div>{data ? JSON.stringify(data) : '查询未激活'}</div>;
}

// 激活组件
import { useSearchParams } from 'react-router-dom';

function ActivatorComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  const activateQuery = () => {
    setSearchParams({ ...Object.fromEntries(searchParams), enableQuery: 'true' });
  };

  return <button onClick={activateQuery}>激活查询</button>;
}

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