React Relay自定义Hook封装usePreloadedQuery的规范疑问

你的核心疑问 #

• 能否在自定义Hook中整合usePreloadedQuery相关逻辑
• 能否给usePreloadedQuery传入null作为参数
• 在Hook中读取React Context是否属于最佳实践

你的代码片段 #

import React from 'react';
import { useQueryLoader, usePreloadedQuery } from 'react-relay/hooks';
import { useAppContext } from 'src/appContext';

// on src/appContext
// export const useAppContext = () => useContext<AppContextType>(AppContext);

export const useGenericQuery = (query) => {
    const { globalQueryRef } = useAppContext(); // this is React.Context
    const [queryReference, loadQuery] = useQueryLoader(query, globalQueryRef);

    React.useEffect(() => {
        if (loadQuery) {
            loadQuery();
        }
        return () => {
            queryReference?.dispose();
        };
    }, [loadQuery]);

    const data = usePreloadedQuery(query, queryReference || null);

    return {
        data,
    };
};

具体解答 #

1. 自定义Hook整合Relay查询逻辑可行，但需调整细节 #

Relay确实推荐在组件树深层使用usePreloadedQuery，但用自定义Hook封装查询逻辑完全符合实践——这能减少重复代码，统一查询处理逻辑。不过你的实现有两个需要优化的点：

• 自动调用loadQuery可能引发重复请求：当前useEffect仅依赖loadQuery，但loadQuery是稳定引用，effect只会执行一次；若globalQueryRef变化，queryReference更新后不会重新加载。建议把queryReference和globalQueryRef加入依赖数组，且仅在queryReference不存在时调用loadQuery。
• dispose时机需匹配引用生命周期：组件卸载时调用queryReference?.dispose()合理，但如果queryReference更新，旧引用应在新加载完成后再释放，避免数据丢失。

2. 绝对不能给usePreloadedQuery传null #

Relay的usePreloadedQuery要求第二个参数必须是有效的预加载查询引用，传入null会直接抛出错误。你需要先判断queryReference是否存在，再调用该Hook：

• 若queryReference不存在，可返回null作为data，同时返回加载状态让组件处理（比如显示加载中）。
• 也可利用Relay的Suspense机制，让组件在查询加载完成前进入挂起状态，但需确保loadQuery已被调用。

3. 在Hook中读取React Context是最佳实践 #

React Context的设计目的就是跨组件层级共享数据，在自定义Hook中读取Context是非常常见且推荐的做法——只要你的globalQueryRef确实是全局需要的查询参数（比如用户ID、全局筛选条件），这种用法完全合理。

优化后的代码示例 #

import React from 'react';
import { useQueryLoader, usePreloadedQuery } from 'react-relay/hooks';
import { useAppContext } from 'src/appContext';

export const useGenericQuery = (query) => {
    const { globalQueryRef } = useAppContext();
    const [queryReference, loadQuery] = useQueryLoader(query, globalQueryRef);

    React.useEffect(() => {
        // 仅当未加载时触发查询
        if (loadQuery && !queryReference) {
            loadQuery();
        }

        return () => {
            queryReference?.dispose();
        };
    }, [loadQuery, queryReference, globalQueryRef]); // 加入所有相关依赖

    // 仅当有有效引用时执行查询
    const data = queryReference ? usePreloadedQuery(query, queryReference) : null;

    return {
        data,
        isLoading: !queryReference, // 提供加载状态给组件使用
    };
};

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