5

我正在为 react-router 和中继集成而苦苦挣扎。

截至目前，我坚持这个例子

它使用了useLazyLoadQuery钩子，虽然一切看起来都很好，但我也看到了另一种方法：usePreloadedQuery.

文档说useLazyLoadQuery钩子

如果不小心使用，可能会触发多个嵌套或瀑布式往返，并等到渲染开始数据获取（此时它通常可以比渲染更早开始），从而降低性能。相反，更喜欢 usePreloadedQuery。

但是，尚不清楚如何将其与 react-router 集成，显然，我不想重新发明自己的路由器...

我注意到的另一件事是usePreloadedQuery应该与 useQueryLoader;一起使用。同时在文档中，他们只需调用即可直接加载它loadQuery()；

所以我不确定哪种方式是首选。

我最终得到了这样的包装器：

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

1 回答 1

0

According to the Relay docs:

The component-based approach of React Router v4 does not readily allow for aggregating the data requirements for nested routes, and as such does not readily permit an approach that will avoid request waterfalls from nesting QueryRenderer components.

So basically using react-router with Relay is out :(

Relay recommends using Found as an alternative router, which is similar to react-router. Found integrates well with Relay using the found-relay package.

于 2022-02-09T04:51:35.803 回答