如何在Relay中获取`initialQueryRef`？

Question

在 Relay 文档中，要获取查询，您必须首先使用 预加载它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，我将无法继续进行。我如何获得这个？

Answer 1

查询引用似乎是从useQueryLoaderor返回的loadQuery。（在原始帖子中）的参数是可选的，并且可能源自路由器之前对完成的调用useQueryLoader，但它绝不是必需的。使用它尽快加载查询的示例如下：initialRefloadQueryuseQueryLoader

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);
}