Sid Comments - Answer Overflow

Sid

Explore posts from servers

RRailway TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by Sid on 9/12/2024 in #questions

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

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

9 replies

TTCTheo's Typesafe Cult

•Created by Sid on 9/12/2024 in #questions

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

9 replies

TTCTheo's Typesafe Cult

•Created by Sid on 9/12/2024 in #questions

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

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,
      };
    }),

9 replies

TTCTheo's Typesafe Cult

•Created by Sid on 9/12/2024 in #questions

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

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>
  );
};