En los documentos de Relay , para obtener una consulta, primero debe precargarla usando useQueryLoader y luego pasar el resultado de esto a usePreloadedQuery . Sin embargo, este primer paso, useQueryLoader , toma dos argumentos: una consulta en sí misma, que es fácil de obtener, y preloadedQueryReference , que los documentos no explican cómo obtener. Todo lo que dicen es "por ejemplo, proporcionado por el enrutador", pero ningún enrutador admite Retransmisión con ganchos, por lo que esta no es información útil.
Como un ejemplo simple de esto, tengo un solo componente donde quiero precargar y luego usar una consulta:
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); } Sin embargo, sin initialRef , no puedo continuar. ¿Cómo obtengo esto?
Parece que la consulta ref se devuelve desde useQueryLoader o loadQuery . El argumento para useQueryLoader ( initialRef en la publicación original) es opcional y puede derivarse de una llamada anterior a loadQuery realizada por el enrutador, pero de ninguna manera es necesario. Un ejemplo del uso de useQueryLoader que carga la consulta lo antes posible es este:
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); }