Привет, я разрабатывал веб-приложение, используя следующий js, используя реагирующий запрос для выборки API, и теперь у меня проблема при создании локального хранилища из _app.tsx
базы на параметре URL.
http://localhost:3000?token=123456789
и если я получу к нему доступ со страницы индекса, это локальное хранилище не будет найдено
// app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }: AppProps) {
const { isReady, query }: string | any = useRouter();
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
staleTime: 0,
retry: false,
},
},
})
);
useEffect(() => {
if (isReady) {
if (query.token) {
console.info('token ', query.token);
localStorage.setItem('token', query.token);
} else {
window.console.info('no token');
}
console.info('current token ', window.localStorage.getItem('token'));
}
}, [isReady]);
return (
<QueryClientProvider client = {queryClient}>
<Hydrate state = {pageProps.dehydratedState}>
<Component {...pageProps} />
</Hydrate>
<ReactQueryDevtools />
</QueryClientProvider>
);
}
export default MyApp;
и ниже, когда я пытаюсь получить доступ к токену из локального хранилища, он не был найден
const { data, error, isFetching } = useQuery('event_list', () =>
getEventList({
token: window.localStorage.getItem('token') || null,
query: {
order_start: 'desc',
},
})
);
Поскольку вы отображаете свою страницу, даже если isReady
имеет значение false, запрос, скорее всего, сработает один раз, прежде чем сработает эффект, устанавливающий элемент localStorage. Поскольку токен не является зависимостью от запроса, он не будет повторно загружаться, если токен изменится.
Что вы можете сделать, это:
isReady
является ложным / у вас нет токена, но это, вероятно, полностью отключит SSR.const token = useTokenFromContext()
const query = useQuery(
['event_list', token],
() => getEventList(token),
{
enabled: !!token
}
)