Theo's Typesafe Cult•7d ago

Single react query doesn't seem to hit then endpoint in production (Vercel)

Hi there, Thought i'd ask here as i'm at a loss I have a dashboard page with 2 queries: 1. getRecentContent 2.getDashboardStats When I load the page in production, the Vercel logs show that only getDashboardStats is getting hit, getDashboardStats doesn't, even though its on the same page So I figured it was a FE problem, so I went to log the query stuff, I notice: 1. The query is running 2. It flips from isLoading instantly, suggestive of something being returned very quickly before a network request is being made 3. The other query takes far longer to load in because it is actually hitting the API It executes as expected in development I would have thought there was some weird caching thing, but the two procedures are on the same router, and accessible via the same api route Has anyone faced something similar, or can suggest something to look into?

5 Replies

Sid•7d ago

Here are some code examples if interested: FE:

export const RecentContentSection = () => {
  const [selectedTab, setSelectedTab] = useState<'myself' | 'organisation'>(
    'myself'
  );

  const {
    data,
    isLoading,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
    error,
  } = clientApi.organisationMember.getRecentContent.useInfiniteQuery(
    {
      cursor: null,
      limit: 5,
      isMyself: selectedTab === 'myself',
    } as { cursor: string | null; limit: number; isMyself: boolean },
    {
      getNextPageParam: (lastPage) => {
        return lastPage.nextCursor;
      },
    }
  );

  console.log('RECENT CONTENT: ', { data, error, isLoading });

  return (
    <div className="mt-14 flex items-center">
      <Tabs defaultValue="myself" className="w-full">
        <div className="mb-7 flex items-center gap-16">
          <H3>Recent</H3>
          <TabsList>
            <TabsTrigger
              onClick={() => setSelectedTab('myself')}
              value="myself"
            >
              Myself
            </TabsTrigger>
            <TabsTrigger
              onClick={() => setSelectedTab('organisation')}
              value="organisation"
            >
              Organisation
            </TabsTrigger>
          </TabsList>
        </div>
        <TabsContent value="myself">
          <RecentContentTab
            isLoading={isLoading}
            isFetchingNextPage={isFetchingNextPage}
            hasNextPage={hasNextPage}
            data={data}
            fetchNextPage={fetchNextPage}
          />
        </TabsContent>
        <TabsContent value="organisation">
          <RecentContentTab
            isLoading={isLoading}
            isFetchingNextPage={isFetchingNextPage}
            hasNextPage={hasNextPage}
            data={data}
            fetchNextPage={fetchNextPage}
          />
        </TabsContent>
      </Tabs>
    </div>
  );
};

export const RecentContentSection = () => {
  const [selectedTab, setSelectedTab] = useState<'myself' | 'organisation'>(
    'myself'
  );

  const {
    data,
    isLoading,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
    error,
  } = clientApi.organisationMember.getRecentContent.useInfiniteQuery(
    {
      cursor: null,
      limit: 5,
      isMyself: selectedTab === 'myself',
    } as { cursor: string | null; limit: number; isMyself: boolean },
    {
      getNextPageParam: (lastPage) => {
        return lastPage.nextCursor;
      },
    }
  );

  console.log('RECENT CONTENT: ', { data, error, isLoading });

  return (
    <div className="mt-14 flex items-center">
      <Tabs defaultValue="myself" className="w-full">
        <div className="mb-7 flex items-center gap-16">
          <H3>Recent</H3>
          <TabsList>
            <TabsTrigger
              onClick={() => setSelectedTab('myself')}
              value="myself"
            >
              Myself
            </TabsTrigger>
            <TabsTrigger
              onClick={() => setSelectedTab('organisation')}
              value="organisation"
            >
              Organisation
            </TabsTrigger>
          </TabsList>
        </div>
        <TabsContent value="myself">
          <RecentContentTab
            isLoading={isLoading}
            isFetchingNextPage={isFetchingNextPage}
            hasNextPage={hasNextPage}
            data={data}
            fetchNextPage={fetchNextPage}
          />
        </TabsContent>
        <TabsContent value="organisation">
          <RecentContentTab
            isLoading={isLoading}
            isFetchingNextPage={isFetchingNextPage}
            hasNextPage={hasNextPage}
            data={data}
            fetchNextPage={fetchNextPage}
          />
        </TabsContent>
      </Tabs>
    </div>
  );
};

BE:

getRecentContent: organisationMemberProcedure
    .input(
      z.object({
        cursor: z.string().nullish().optional(),
        limit: z.number().default(5),
        isMyself: z.boolean().default(true),
      })
    )
    .query(async ({ ctx, input }) => {
      console.log('GET RECENT CONTENT');
      const userIdCondition = input.isMyself ? { userId: ctx.user.id } : {};

      const generatedContent = await ctx.db.contentGeneration.findMany({
        where: {
          ...userIdCondition,
          organisationId: ctx.organisationMember.organisationId,
        },
        select: {
          id: true,
          createdAt: true,
          growthProfile: {
            select: {
              name: true,
            },
          },
          outboundContentGeneration: {
            select: {
              type: true,
              id: true,
              messages: true,
            },
          },
          inboundContentGeneration: {
            select: {
              type: true,
              id: true,
              message: true,
              messageId: true,
            },
          },
          organisationMember: {
            select: {
              user: {
                select: {
                  firstName: true,
                },
              },
            },
          },
        },
        orderBy: {
          createdAt: 'desc',
        },
        take: input.limit + 1,
        cursor: input.cursor ? { id: input.cursor } : undefined,
      });

      const nextCursor =
        generatedContent.length > input.limit
          ? generatedContent.pop()?.id
          : null;

      return {
        generatedContent,
        nextCursor,
      };
    }),

getRecentContent: organisationMemberProcedure
    .input(
      z.object({
        cursor: z.string().nullish().optional(),
        limit: z.number().default(5),
        isMyself: z.boolean().default(true),
      })
    )
    .query(async ({ ctx, input }) => {
      console.log('GET RECENT CONTENT');
      const userIdCondition = input.isMyself ? { userId: ctx.user.id } : {};

      const generatedContent = await ctx.db.contentGeneration.findMany({
        where: {
          ...userIdCondition,
          organisationId: ctx.organisationMember.organisationId,
        },
        select: {
          id: true,
          createdAt: true,
          growthProfile: {
            select: {
              name: true,
            },
          },
          outboundContentGeneration: {
            select: {
              type: true,
              id: true,
              messages: true,
            },
          },
          inboundContentGeneration: {
            select: {
              type: true,
              id: true,
              message: true,
              messageId: true,
            },
          },
          organisationMember: {
            select: {
              user: {
                select: {
                  firstName: true,
                },
              },
            },
          },
        },
        orderBy: {
          createdAt: 'desc',
        },
        take: input.limit + 1,
        cursor: input.cursor ? { id: input.cursor } : undefined,
      });

      const nextCursor =
        generatedContent.length > input.limit
          ? generatedContent.pop()?.id
          : null;

      return {
        generatedContent,
        nextCursor,
      };
    }),

Styly•7d ago

its being cached its not a code thing, check vercel docs

Sid•7d ago

Sid•7d ago

There doesn't seem to be any caching, and there isn't anything else that has this kind of behaviour

Sturlen•6d ago

have you checked the Network tab of the browser dev tools? should tell you if the request is actually hitting your backend

Gaming

Programming

Single react query doesn't seem to hit then endpoint in production (Vercel)