Я столкнулся с проблемой при обезвоживании данных в SSR в пользовательском HOC. В частности, я хочу перевести два ключа 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
У реквизита одинаковое имя dehydratedState
, поэтому они перезаписывают друг друга. Это проблема не реакции-запроса, а состава 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),
},
};
};
Ты мой спасатель. Спасибо вам от всего сердца за все! @TkDodo
Мне непонятно, почему вы создаете здесь два разных клиента запросов.