Mj
Mj
PostsComments
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
noticed in trpc we pass a lot of undefined in our functions, why?
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
nevermind ser. got it
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
hello sir. how do i pass data into a trpc useQuery wrapper? i'm trying to pass in refetchOnWindowFocus to my useQuery
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
this is my oldqueryData type 
(parameter) oldQueryData: {
    post: GetResult<{
        id: string;
        title: Date;
        content: string | null;
        authorId: string;
    }, unknown> & {};
    author: {
        id: string;
        username: string | null;
        profileImageUrl: string;
        name: string;
    };
}[] | undefined
(parameter) oldQueryData: {
    post: GetResult<{
        id: string;
        title: Date;
        content: string | null;
        authorId: string;
    }, unknown> & {};
    author: {
        id: string;
        username: string | null;
        profileImageUrl: string;
        name: string;
    };
}[] | undefined
you know in optimistic updates you have to recreate what is happening in the object basically with this type this is my sample object to pass into the setData method but its throwing an error 
[
  {
    "post": {
      "id": "1",
      "title": "2023-07-05T12:34:56.789Z",  //dont worry about this tite, its supposed to be createdAt. it's a date object.
      "content": "This is the content of the post",
      "authorId": "user_2TAzpA7V1ymtk5HFAnr5IbkFd0W"
    },
    "author": {
      "id": "user_2TAzpA7V1ymtk5HFAnr5IbkFd0W",
      "username": "john_doe",
      "profileImageUrl": "https://clerk.com/john_doe.jpg",
      "name": "Test Name"
    }
  },
]
[
  {
    "post": {
      "id": "1",
      "title": "2023-07-05T12:34:56.789Z",  //dont worry about this tite, its supposed to be createdAt. it's a date object.
      "content": "This is the content of the post",
      "authorId": "user_2TAzpA7V1ymtk5HFAnr5IbkFd0W"
    },
    "author": {
      "id": "user_2TAzpA7V1ymtk5HFAnr5IbkFd0W",
      "username": "john_doe",
      "profileImageUrl": "https://clerk.com/john_doe.jpg",
      "name": "Test Name"
    }
  },
]
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
you mean using
type optimisticUpdates = RouterOptions[".."][".."]
type optimisticUpdates = RouterOptions[".."][".."]
something like that right? i did that too
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
is there a way to generate this type from prisma for my post query?
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
kindly take a look ser
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
i was also wondering why he was using the callback hook a lot but what concerns me is his optimistic update query.
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
oh it's not my code lol. just one i saw on github that's working
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
Here's the type he's using 
import { Prisma } from "@prisma/client";

const todoInclude = Prisma.validator<Prisma.TodoInclude>()({
    author: {
      select: {
        name: true,
        id: true,
      },
    },
  });
  
  export type TodoWithUser = Prisma.TodoGetPayload<{
    include: typeof todoInclude;
  }>;
import { Prisma } from "@prisma/client";

const todoInclude = Prisma.validator<Prisma.TodoInclude>()({
    author: {
      select: {
        name: true,
        id: true,
      },
    },
  });
  
  export type TodoWithUser = Prisma.TodoGetPayload<{
    include: typeof todoInclude;
  }>;
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
i know the major problem right now is the fact that i'm not getting the right type for the 
old
old
instead of setting it to any. here's someone that successfully implemented it. 
const addTodo = api.todo.create.useMutation({
    onMutate: async ({ content }) => {
      setTodo("");
      
      await utils.todo.findAll.cancel();


      const previousTodos = utils.todo.findAll.getData();


      utils.todo.findAll.setData(
        undefined,
        (oldQueryData: TodoWithUser[] | undefined) =>
          [
            ...(oldQueryData ?? []),
            {
              author: {
                name: session?.user?.name,
                id: session?.user?.id,
              },
              content,
              done: false,
              createdAt: new Date(),
              updatedAt: new Date(),
            },
          ] as TodoWithUser[]
      );

      
      return { previousTodos };
    },
    onError: (err, _newTodo, context) => {
      
      utils.todo.findAll.setData(undefined, context?.previousTodos);

      // Show error message
      const zodErrMessage =
        err.shape?.data.zodError?.fieldErrors.content?.at(0);
      toast({
        variant: "destructive",
        title: "Error while creating todo",
        description: zodErrMessage
          ? zodErrMessage
          : "There was an error while saving todo. Please try again later.",
      });
    },
    onSettled: () => {
      void utils.todo.findAll.invalidate();
    },
  });

  const handleInputOnChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setTodo(event.target.value);
    },
    []
  );

  const handleAddTodo = useCallback(() => {
    addTodo.mutate({
      content: todo,
    });
  }, [addTodo, todo]);

  const handleKeyDown = useCallback(
    (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === "Enter") {
        handleAddTodo();
      }
    },
    [handleAddTodo]
  );
const addTodo = api.todo.create.useMutation({
    onMutate: async ({ content }) => {
      setTodo("");
      
      await utils.todo.findAll.cancel();


      const previousTodos = utils.todo.findAll.getData();


      utils.todo.findAll.setData(
        undefined,
        (oldQueryData: TodoWithUser[] | undefined) =>
          [
            ...(oldQueryData ?? []),
            {
              author: {
                name: session?.user?.name,
                id: session?.user?.id,
              },
              content,
              done: false,
              createdAt: new Date(),
              updatedAt: new Date(),
            },
          ] as TodoWithUser[]
      );

      
      return { previousTodos };
    },
    onError: (err, _newTodo, context) => {
      
      utils.todo.findAll.setData(undefined, context?.previousTodos);

      // Show error message
      const zodErrMessage =
        err.shape?.data.zodError?.fieldErrors.content?.at(0);
      toast({
        variant: "destructive",
        title: "Error while creating todo",
        description: zodErrMessage
          ? zodErrMessage
          : "There was an error while saving todo. Please try again later.",
      });
    },
    onSettled: () => {
      void utils.todo.findAll.invalidate();
    },
  });

  const handleInputOnChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setTodo(event.target.value);
    },
    []
  );

  const handleAddTodo = useCallback(() => {
    addTodo.mutate({
      content: todo,
    });
  }, [addTodo, todo]);

  const handleKeyDown = useCallback(
    (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === "Enter") {
        handleAddTodo();
      }
    },
    [handleAddTodo]
  );
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
do i have to do it the trpc way?
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
i know you suggested i used trpc helper wrappers to implement it but will using react query queryClient directly work?
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
i only have loader there
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
probably all the debugging, didnt realise
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
any feedback?
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
fixed that
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
thanks for checking it out ser
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
haha
101 replies
TTCTheo's Typesafe Cult
Created by Mj on 7/26/2023 in #questions
How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?
i give up
101 replies