#Too many page requests

40 messages · Page 1 of 1 (latest)

hidden mango
shut nightBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

hidden mango
#

I feel like im the only one with stupid issues like this in the next app router world,

I can't even find why all these rerenders are happening let alone solve it.

#

I believe calling await auth() is triggering a loop somewhere.

But I don't know how else I can take session data (jwt and user's first name) inside fetch wrapper

wintry creek
#

What version of authjs

#

also the code you've provided has no context to how its being used

hidden mango
#

v5

#

i can send you the wrapper

wintry creek
#

gowan

hidden mango
# 
import { auth } from '@/auth';
import { Response } from '@/types/response.type';
import { getSession } from 'next-auth/react';

function queryParams(
  params: Record<string, string | number | boolean>
): string {
  return Object.entries(params)
    .map(
      ([key, value]) =>
        `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
    )
    .join('&');
}

export const client = async <T = null>(
  url: URL | RequestInfo,
  init: RequestInit,
  params?: Record<string, string | number | boolean>
): Promise<Response<T>> => {
  const session = await auth();

  let endpoint = '';
  const queryString = params ? `?${queryParams(params)}` : '';

  if (session?.user)
    endpoint = `${process.env.NEXT_PUBLIC_API_URL}/${session.user.rents[0].id}/${url}${queryString}`;
  else endpoint = `${process.env.NEXT_PUBLIC_API_URL}/${url}${queryString}`;

  try {
    console.log(endpoint);
    const response = await fetch(endpoint, {
      ...init,
      headers: {
        ...init.headers,
        ...(session?.user && {
          Authorization: `Bearer ${session?.user?.token}`,
        }),
        ...(typeof init.body === 'string' && {
          'Content-Type': 'application/json',
        }),
      },
    });

    const jsonResponse = await response.json();

    if (!jsonResponse.metaData && !jsonResponse?.isSuccess) throw jsonResponse;

    return jsonResponse;
  } catch (error) {
    console.error(error);
    return error as Response<T>;
  }
};
wintry creek
#

right but what is calling this function

hidden mango
# 
  searchParams,
}: {
  searchParams: QueryParams;
}) {
  const data = (await getClients(searchParams)) as unknown as Paginated<Client>;

  return (
    <div className='flex-1 space-y-4'>
      <h1 className='font-poppins font-medium tracking-wider'>Clientss</h1>

      <div className='flex items-center justify-between gap-2'>
        <Stat
          title={0}
          helpText='Total Clients'
          icon={<Building width={20} height={20} />}
        />

        <Stat
          title={0}
          helpText='Non-Grata Clients'
          icon={<Building width={20} height={20} />}
        />
      </div>

      <Filter />

      <DisplayData
        data={data.data}
        renderItem={(data) => <ClientCard data={data} />}
        keyExtractor={(item) => item.id}
      />
    </div>
  );
}
#

getClients

#

is calling client function inside

wintry creek
#

comment out all the components which dont pertain to this issue

#

then see if the error persists

hidden mango
#

what's weird is that if I navigate using Link component from say /users to /users/1 it works good the caching

If i go to users/1 and refresh the browsers (the cache is cleared) and try to go back to /users with the browsers navigation buttons it starts an infinite loop

wintry creek
#

in fact comment out everything on this page, get the session and print it as a json string to the page

#

const session = await auth();

return <div>{JSON.stringify(session)}</div>;

#

see if the error persists

hidden mango
#

Lemme see,

hidden mango
#

@wintry creek nope, the requests are reduced down to two

wintry creek
#

So did commenting everything out fix it?

#

obviously a temporary measure, but its a good way to test

hidden mango
#

I can make another screen record to better show you the case

wintry creek
#

Yep

hidden mango
#

sec

#

So this happends only if i reload the page and try to go back

#

weird

wintry creek
#

Is this video with the component commented out? If so show me

hidden mango
#

no with the one not commented, ill show you another one with the page commented out

#

im going back with mouse btw at the end

wintry creek
#

So what I am taking from this last video is that commenting out that entire page solves the issue?

hidden mango
#

yeah, i think using auth() inside that client.ts function is wrong approach

#

i might be wrong

wintry creek
#

Okay, so start commenting stuff out and see which thing breaks it

hidden mango
#

because the number of requests are lowered when i comment that line

bitter knoll
#

https://i.imgur.com/HhBKaio.png
https://i.imgur.com/l6LXs0v.png

Could it be something related to the way you are updating searchparams?
I dont know your route structure, but maybe you are updating searchParams in the queryParams function and then triggering a rerender because searchParams updates? (This would then loop forever)

Using searchParams opts the route into to dynamic render and would then render every time searchParams changes. Is this part of a nested catchall route or something?

Imgur
Imgur