reactjs 在Nextjs中使用高阶组件时，如何防止dehydedState覆盖？

ubof19bj 于 2022-11-29 发布在 React

关注(0)|答案(1)|浏览(144)

我在自定义HOC中将数据脱水到SSR时遇到了一个问题，具体来说，我想将两个密钥test1和test2从服务器水合到客户端以支持SSR，但我从test1返回了未定义的值。我认为原因是dehydratedState被覆盖了。如何修复此问题？
我的代码：

const withHOC = (gssp) => async (context) => {
    const queryClient = new QueryClient();
    await queryClient.prefetchQuery('test1', () => 'abc123');
    const childProps = await gssp(context);

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
            ...(childProps.props ? childProps.props : {}),
        },
    };
};

export const getServerSideProps = withHOC(async context => {
    const queryClient = new QueryClient();
    await queryClient.prefetchQuery('test2', () => 'profile-example-data');

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
    };
});

// when trying test to get data in component:

queryClient.getQueryData('test1'); // undefined
queryClient.getQueryData('test2'); // profile-example-data

reactjs

来源：https://stackoverflow.com/questions/74551203/how-to-prevent-dehydratedstate-overwrite-when-using-in-higher-order-component-in

1条答案

按热度按时间

jfgube3f1#

这两个属性具有相同的名称dehydratedState，因此它们会相互覆盖。这不是react-query的问题，而是getServerSideProps组合的问题。
我最好的猜测是，为什么要将它分成两个函数，是因为有些页面只需要'test1'，而其他页面则需要“增强”它以预取'test1'和'test2'。
如果是这种情况，我可以复制逻辑，或者只提取预取部分，而不是整个“getServerSideProps”部分，将其提取到一个可重用函数中。它还应该使用相同的queryClient，因为这是您只需要脱水一次的数据所在的位置：

export const prefetchTest1 = (queryClient) => queryClient.prefetchQuery('test1', () => 'abc123');

export const getServerSideProps = async context => {
    const queryClient = new QueryClient();
    await prefetchTest1(queryClient)
    await queryClient.prefetchQuery('test2', () => 'profile-example-data');

    return {
        props: {
            dehydratedState: dehydrate(queryClient),
        },
    };
};

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 在Nextjs中使用高阶组件时，如何防止dehydedState覆盖？

1条答案

相关问题

热门标签

最新问答