Как предотвратить перезапись dehydratedState при использовании в компоненте более высокого порядка в Nextjs?

Я столкнулся с проблемой при обезвоживании данных в 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

Мне непонятно, почему вы создаете здесь два разных клиента запросов.

Chad S. 23.11.2022 23:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У реквизита одинаковое имя 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

Epple 26.11.2022 16:05

Другие вопросы по теме