如何在 Relay 中获取 `initialQueryRef`？答案

【问题标题】：How to obtain the `initialQueryRef` in Relay?如何在 Relay 中获取 `initialQueryRef`？
【发布时间】：2021-10-12 22:12:18
【问题描述】：

In the Relay docs，要获取查询，您必须先使用useQueryLoader 预加载它，然后再将结果传递给usePreloadedQuery。然而，这第一步，useQueryLoader 有两个参数：一个查询本身，很容易获得，preloadedQueryReference，文档没有解释如何获得。他们所说的只是“例如由路由器提供”，但实际上没有路由器支持带钩子的中继，因此这不是有用的信息。

作为一个简单的例子，我想预加载一个组件，然后使用查询：

import {
    usePaginationFragment,
    usePreloadedQuery,
    useQueryLoader
} from "react-relay";
import graphql from 'babel-plugin-relay/macro';

const MY_QUERY = graphql` some stuff here `;

export default function SomeComponent(props) {
    const initialRef = ???????;
    const [
        queryReference,
        loadQuery,
        disposeQuery,
    ] = useQueryLoader(AllHits, initialRef);

    const qry = usePreloadedQuery(AllHits, queryReference);
}

但是，如果没有initialRef，我将无法继续进行下去。我如何获得这个？

【问题讨论】：

标签： javascript reactjs graphql relay

【解决方案1】：

查询 ref 似乎是从useQueryLoader 或loadQuery 返回的。参数到useQueryLoader（原帖中的initialRef）是可选，并且可能源自路由器之前对loadQuery的调用，但是它绝不需要。使用useQueryLoader 尽快加载查询的示例如下：

const some_query = graphql` some query here`;

function Parent(props){
    // Note, didn't pass in the optional query ref here
    const [
        queryRef,
        loadQuery,
        disposeQuery
    ] = useQueryLoader(some_query); 

    // Load immediately
    useEffect(() => {
        loadQuery(
            {count: 20},
            {fetchPolicy: 'store-or-network'},
        );
    }, [loadQuery]);


    if (!!queryRef) {
        return <Child queryRef={queryRef}/>;
    } else {
        return "loading...";
    }
}

export function Child(props) {
    const {queryRef} = props;
    const loaded = usePreloadedQuery(some_query, queryRef);
    const { data } = useFragment(
        graphql`some_fragment`,
        loaded
    );
    return JSON.stringify(data);
}

【讨论】：