WO Comments - Answer Overflow

Topics

WO

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult

•Created by WO on 8/4/2023 in #❓-help

How to refetch data for a query when a mutation is performed in a different component?

Thanks! I’m trying to use the useContext hook to access my queries and invalidate them in the code snippets above but it doesn’t seem to be working. I’ve tried changing my query cache time, stale time, removing the refetch function from it but still can’t get it to work properly

10 replies

TTCTheo's Typesafe Cult

•Created by WO on 8/4/2023 in #questions

How to refetch data for a query when a mutation is performed in a different component?

Tried all of those and no luck. Very strange. Think ill just have to live with it not working

13 replies

TTCTheo's Typesafe Cult

•Created by WO on 8/4/2023 in #questions

How to refetch data for a query when a mutation is performed in a different component?

Could it be some conflict with the cacheTime field in the query?

13 replies

TTCTheo's Typesafe Cult

•Created by WO on 8/4/2023 in #questions

How to refetch data for a query when a mutation is performed in a different component?

Just tried that but doesnt seem to be working. Not seeing anything in the console indicating that its refetching the new status either

13 replies

TTCTheo's Typesafe Cult

•Created by WO on 8/4/2023 in #questions

How to refetch data for a query when a mutation is performed in a different component?

Gotcha, thanks thats good to know. I updated my code to use the useContext from tRPC but the I'm still not getting the fresh data on the user side.

import { api } from "~/utils/api";

const utils = api.useContext();

const { mutate: declineJoinRequest, isLoading: isLoadingDeclineJoinRequest } =
    api.leagueUserManagement.declineJoinRequest.useMutation({
      onSuccess: async () => {
        toast({
          title: "Success",
          description: "Join request declined",
          variant: "success",
        });
        await refetchJoinRequests();
        await utils.leagueUserManagement.getJoinRequestStatus.invalidate();
      },
      onError: (error) => {
        toast({
          title: "Error",
          description: error.message,
          variant: "error",
        });
      },
    });

import { api } from "~/utils/api";

const utils = api.useContext();

const { mutate: declineJoinRequest, isLoading: isLoadingDeclineJoinRequest } =
    api.leagueUserManagement.declineJoinRequest.useMutation({
      onSuccess: async () => {
        toast({
          title: "Success",
          description: "Join request declined",
          variant: "success",
        });
        await refetchJoinRequests();
        await utils.leagueUserManagement.getJoinRequestStatus.invalidate();
      },
      onError: (error) => {
        toast({
          title: "Error",
          description: error.message,
          variant: "error",
        });
      },
    });

Is this the correct setup? I also removed the query key from the query on the user side

13 replies

TTCTheo's Typesafe Cult

•Created by WO on 8/4/2023 in #questions

How to refetch data for a query when a mutation is performed in a different component?

I think im doing something wrong with the queryKey field because Im not seeing any intelisense for it. In the docs its not very clear how to set the queryKey

13 replies

TTCTheo's Typesafe Cult

•Created by WO on 8/4/2023 in #questions

How to refetch data for a query when a mutation is performed in a different component?

Gotcha here's the code Component A (checking request status on user side)

const {
    data: joinRequestStatus,
    isLoading: isLoadingJoinRequestStatus,
    refetch: refetchJoinRequestStatus,
  } = api.leagueUserManagement.getJoinRequestStatus.useQuery(
    {
      leagueSlug: league.leagueSlug,
    },

    {
      queryKey: [
        "leagueUserManagement.getJoinRequestStatus",
        { leagueSlug: league.leagueSlug },
      ],
      staleTime: 5 * (60 * 1000),
      cacheTime: 10 * (60 * 1000),
    }
  );

const {
    data: joinRequestStatus,
    isLoading: isLoadingJoinRequestStatus,
    refetch: refetchJoinRequestStatus,
  } = api.leagueUserManagement.getJoinRequestStatus.useQuery(
    {
      leagueSlug: league.leagueSlug,
    },

    {
      queryKey: [
        "leagueUserManagement.getJoinRequestStatus",
        { leagueSlug: league.leagueSlug },
      ],
      staleTime: 5 * (60 * 1000),
      cacheTime: 10 * (60 * 1000),
    }
  );

Component B (declining the user request on admin side)

import { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient();
const { mutate: declineJoinRequest, isLoading: isLoadingDeclineJoinRequest } =
    api.leagueUserManagement.declineJoinRequest.useMutation({
      onSuccess: async () => {
        toast({
          title: "Success",
          description: "Join request declined",
          variant: "success",
        });
        await refetchJoinRequests();
        await queryClient.invalidateQueries({
          queryKey: [
            "leagueUserManagement.getJoinRequestStatus",
            { leagueSlug: leagueSlug },
          ],
        });
      },
      onError: (error) => {
        toast({
          title: "Error",
          description: error.message,
          variant: "error",
        });
      },
    });

import { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient();
const { mutate: declineJoinRequest, isLoading: isLoadingDeclineJoinRequest } =
    api.leagueUserManagement.declineJoinRequest.useMutation({
      onSuccess: async () => {
        toast({
          title: "Success",
          description: "Join request declined",
          variant: "success",
        });
        await refetchJoinRequests();
        await queryClient.invalidateQueries({
          queryKey: [
            "leagueUserManagement.getJoinRequestStatus",
            { leagueSlug: leagueSlug },
          ],
        });
      },
      onError: (error) => {
        toast({
          title: "Error",
          description: error.message,
          variant: "error",
        });
      },
    });

13 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

the vercel deployment url

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

Yea there is something going wrong between the 3rd party and Vercel I think because the 3rd party works fine with ngrok

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

Im getting a 200 from postman

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

Im not familiar with that but I can try it now

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

There isnt much of a stack trace because on the vercel logs it doesnt even show that my endpoint is being hit even though i put in the base url that it generated

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

Gotcha. Also something to note is im doing this on a Vercel preview deployment not sure if that matters

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

Yea thats how I have it setup

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

Yea thats right.

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

pages

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

The 3rd party app asks for a base url and then it adds on some extra stuff to the url to make it unique. ex) I give the 3rd party app https://example.com/api/exampleRoute The 3rd party app tacks on /[platform]/[leagueId] to it to make it unique so the resulting url is https://example.com/api/exampleRoute/[platform]/[leagueId]

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

Here is an example of the API endpoint

43 replies

TTCTheo's Typesafe Cult

•Created by WO on 6/27/2023 in #questions

How to allow 3rd party apps to send POST requests to your API

import { NextApiRequest, NextApiResponse } from "next";
import { prisma } from "~/server/db";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const leagueUrl: string = req.query.leagueUrl as string;
  const leagueId: string = req.query.leagueId as string;
  const platform: string = req.query.platform as string;
  console.log("League url", leagueUrl);
  console.log("League id", leagueId);
  console.log("League platform", platform);
  console.log("Req body: ", req.body);

  const league = await prisma.league.findUnique({
    where: { leagueSlug: leagueUrl },
  });

  // Make sure the league is registered in our database
  if (!league) {
    return res.status(404).json({ message: "League not found" });
  }

  // Case where the league hasn't had any data imported yet
  if (league.leagueId === null) {
    await prisma.league.update({
      where: { leagueSlug: leagueUrl },
      data: { leagueId: leagueId, platform: platform },
    });
  } else if (league.leagueId !== leagueId) {
    // Case where the league has already been imported but the leagueId doesn't match
    return res.status(400).json({ message: "Invalid export" });
  }

  res.status(200).json({ message: "Hello from Next.js!" });
}

import { NextApiRequest, NextApiResponse } from "next";
import { prisma } from "~/server/db";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const leagueUrl: string = req.query.leagueUrl as string;
  const leagueId: string = req.query.leagueId as string;
  const platform: string = req.query.platform as string;
  console.log("League url", leagueUrl);
  console.log("League id", leagueId);
  console.log("League platform", platform);
  console.log("Req body: ", req.body);

  const league = await prisma.league.findUnique({
    where: { leagueSlug: leagueUrl },
  });

  // Make sure the league is registered in our database
  if (!league) {
    return res.status(404).json({ message: "League not found" });
  }

  // Case where the league hasn't had any data imported yet
  if (league.leagueId === null) {
    await prisma.league.update({
      where: { leagueSlug: leagueUrl },
      data: { leagueId: leagueId, platform: platform },
    });
  } else if (league.leagueId !== leagueId) {
    // Case where the league has already been imported but the leagueId doesn't match
    return res.status(400).json({ message: "Invalid export" });
  }

  res.status(200).json({ message: "Hello from Next.js!" });
}

43 replies

TTCTheo's Typesafe Cult

•Created by SnehPr on 5/22/2023 in #questions

Can somebody help recommend how to use 'npx prisma db push'.

It looks like it’s trying to find your prisma.schema file but can’t find it

7 replies