I am struggling with react-router and relay integration.
As of now, I stick to this example
It uses the useLazyLoadQuery hook, and although everything seems to work just fine, I also see another way of doing this: usePreloadedQuery.
The docs say that the useLazyLoadQuery hook
can trigger multiple nested or waterfalling round trips if used without caution and waits until render to start a data fetch (when it can usually start a lot sooner than render), thereby degrading performance. Instead, prefer usePreloadedQuery.
However, it is not clear how to integrate this with react-router and obviously, I do not want to reinvent my own router...
Another thing I noticed is that usePreloadedQuery should be used in conjunction with
useQueryLoader;
At the same time in docs they load it directly by just calling loadQuery();
So I am not sure which way is preferred.
I ended up with a wrapper like this:
const WrappedHomePage = () => {
const [queryRef, loadQuery] = useQueryLoader(HomePageQuery);
// does calling it like this make any sense at all?
useMemo(() => {
loadQuery();
}, [loadQuery]);
return <HomePage queryRef={queryRef} />;
};
const HomePage = ({ queryRef }) => {
const query = usePreloadedQuery(
graphql`
query HomePageQuery {
...HomePageContainer_repository
}
`,
queryRef
);
return (
<div>
<HomePageContainer fragmentRef={query} />
</div>
);
};