Relay中如何获取`initialQueryRef`？

Question

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，我无法继续进行下去。我如何获得这个？

Answer 1

似乎查询引用是从 useQueryLoader or loadQuery 返回的。 argument to useQueryLoader (initialRef in the original post) is optional, 并且可能派生来自路由器完成的先前对 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);
}

Relay中如何获取`initialQueryRef`？

How to obtain the `initialQueryRef` in Relay?

javascript

relay

reactjs

graphql