Next JS fetch API by url query param

Question

Helo, i was develop web app using next js using react query for fetch api and now have a problem, when create local storage from _app.tsx base on url param

http://localhost:3000?token=123456789

and if i access it from index page, this local storage was not found

// 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;

and below when i try to access token from local storage it was not found

  const { data, error, isFetching } = useQuery('event_list', () =>
    getEventList({
      token: window.localStorage.getItem('token') || null,
      query: {
        order_start: 'desc',
      },
    })
  );

TkDodo · Accepted Answer · 2022-04-08 15:52:12Z

1

Since you render your page even if isReady is false, the query will likely fire off once before the effect that sets the localStorage item kicks in. Since the token is not a dependency to the query, it won't refetch if the token changes.

What you can do is:

not render your app if isReady is false / you have no token, but that will likely disable SSR altogether.
put the token in react context, access it in your query and put it into the query key. That will make sure your query re-fetches when the token changes. You can also disable the query while it has no token:

const token = useTokenFromContext()
const query = useQuery(
  ['event_list', token],
  () => getEventList(token),
  {
    enabled: !!token
  }
)

answered Apr 8, 2022 at 15:52

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next JS fetch API by url query param

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related