james162861 Comments - Answer Overflow

Topics

james162861

Explore posts from servers

TTCTheo's Typesafe Cult DTDrizzle Team

•Created by james162861 on 9/28/2024 in #help

MySQL Spatial Data Schema

Answered it: const POINT = customType<{ data: string; notNull: false }>({ dataType() { return "point"; }, toDriver(value: string): string { return POINT(${value}); }, fromDriver(value: unknown) { return (value as string).replace(/[^0-9.,]/g, ""); }, });

2 replies

TTCTheo's Typesafe Cult

•Created by james162861 on 8/16/2024 in #questions

Express-Like Auth Middleware Pattern For Server Actions?

yea, its definitely easier to debug if the logic is in the action, but you are making an extra query to the database each time the user modifies data

11 replies

TTCTheo's Typesafe Cult

•Created by james162861 on 8/16/2024 in #questions

Express-Like Auth Middleware Pattern For Server Actions?

@Ahmed Senousy I've been doing some research and another option is adding policies if you are using Postgres. For instance, you can enforce that the user is editing a post that it owns. I guess its up to the developer about whether the check should be at the api level or the DB level

11 replies

TTCTheo's Typesafe Cult

•Created by james162861 on 8/16/2024 in #questions

Express-Like Auth Middleware Pattern For Server Actions?

@Ahmed Senousy Thank you! This is basically tRPC without the crazy set up.

11 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

@potato I'm not sure if it is recommended. But i don't know how to make it work otherwise.

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

oh yea, that should work also.

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

you can pass down the data as props or use a context. I dont think there is a way to have a centralized source directly using react query. maybe you can do something funky with the cache, but i am not sure

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

np

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

@Circus ok fixed. You had the page.tsx as a client component directly. I dont think this is best practice (could be wrong). But by making the page.tsx a server component, you can pass down the revalidate function to your client component. You can also use the refetch() function on the client side to update the client component. Hope this helps https://github.com/spenserschwartz/t3-trpc-revalidate-issue/pull/1/files

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

@Circus Ok, I'll take a look later today

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

I just tested it out locally and it worked for me. It's gotta work. Are you using the same tab?

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

@Circus 1) Different Paths: Let's say you are on /settings and want to delete a dialogue that is listed on /dialogues. When you make that deletion and then navigate to /dialogues, the data will be refetched and the dialogue will no longer show so i dont think you need to use revalidatePath. This is only useful when you have a everything in the same view- same path. 2) Parent components: The above example was <SeverComp><ClientComponent/></ServerComponent>, where the server is listing the dialogues and the client is deleting. If the structure was reversed, <ClientComponent><ServerComponent/></ClientComponent>, you would have lift the funciton up into the parent Client component. I dont this is a good idea.

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

I think you need to pass down a callback from the server component to the client component that will revalidate the path as explained here https://discord.com/channels/966627436387266600/1224762014010970252/1229995324463124490

32 replies

TTCTheo's Typesafe Cult

•Created by aditya on 4/2/2024 in #questions

Query Invalidation with trpc not working with React Server Components and App Router

I was running into a similar issue and I found the solution. I have a server component that listed dialogues, and then part of that listing was a client component called DeleteDialogue that I used to delete the dialogues on click. I wanted the dialogue listing cache to invalidate when i deleted a dialogue- really just refetch the new list of entities. I think that invalidating the cache does not work because the listing page is a server component. Therefore, I needed to pass down a callback from the listing page to the client DeleteButton so that it revalidates the path. In DialoguesList.tsx (server comp)

 const handleDeleteCallback = async () => {
    "use server";
    revalidatePath("/dialogues");
  };
...

   <DeleteDialogue
      handleDeleteCallback={handleDeleteCallback}
      id={d.id}
    />

 const handleDeleteCallback = async () => {
    "use server";
    revalidatePath("/dialogues");
  };
...

   <DeleteDialogue
      handleDeleteCallback={handleDeleteCallback}
      id={d.id}
    />

In DeleteDialogues.tsx

  const deleteDialogue = api.dialogue.delete.useMutation({
    onSuccess: () => {
      // Refresh the list of dialogues
      console.log("Deleted dialogue");
      handleDeleteCallback();
    },
  });

  const deleteDialogue = api.dialogue.delete.useMutation({
    onSuccess: () => {
      // Refresh the list of dialogues
      console.log("Deleted dialogue");
      handleDeleteCallback();
    },
  });

32 replies

TTCTheo's Typesafe Cult

•Created by james162861 on 1/31/2024 in #questions

Call post.hello on button click

gotcha. Ok I need to read up on React Query. Thanks so much @andersgee

7 replies

TTCTheo's Typesafe Cult

•Created by om3r on 1/8/2024 in #questions

How can I api useQuery when calling a function?

@Yiannis, thanks for the help. Yes, setting the enabled parameter to a state that defaults to false and then having the onClick event set the state to true does the job.

10 replies

TTCTheo's Typesafe Cult

•Created by james162861 on 1/31/2024 in #questions

Call post.hello on button click

The procedure is definitely called though. I see "calling server" in the terminal

7 replies

TTCTheo's Typesafe Cult

•Created by james162861 on 1/31/2024 in #questions

Call post.hello on button click

thanks @andersgee, that did allow me to call the procedure on the button click. However, when I try to return data from the mutation, the return type is always void, even when I specify the output like so.

  hello: publicProcedure
    .input(z.object({ text: z.string() }))
    .output(z.object({ greeting: z.string() }))
    .mutation(({ input }) => {
      console.log("calling server ");
      return {
        greeting: `Hello ${input.text}`,
      };
    }),

  hello: publicProcedure
    .input(z.object({ text: z.string() }))
    .output(z.object({ greeting: z.string() }))
    .mutation(({ input }) => {
      console.log("calling server ");
      return {
        greeting: `Hello ${input.text}`,
      };
    }),

I cannot log the output

  const handleStart = () => {
    const result = postHello.mutate({ text: "from tRPC" });
    console.log( result);
  };

  const handleStart = () => {
    const result = postHello.mutate({ text: "from tRPC" });
    console.log( result);
  };

7 replies

TTCTheo's Typesafe Cult

•Created by om3r on 1/8/2024 in #questions

How can I api useQuery when calling a function?

@Yiannis Is it possible to modify the query so that the useQuery hook has {enabled : false} so that I can run it on button click?

10 replies

TTCTheo's Typesafe Cult

•Created by KO on 1/13/2024 in #questions

Theo uses api.posts.getAll.useQuery() in T3 tutorial video, but T3 app only has .query() calls.

I understand that there are two ways to fetch via trpc (client and server), but what if I want to make a request on a button click? I can't use useQuery() because it is a hook. Does anyone know how to make the request without the hook?

18 replies