How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?

currently trying to do it like this

export async function getServerSideProps(context: any) {
  const { params, req, res } = context;
  const slug = params.slug;
  console.log("parandsfjknvedikv", slug);
  const { data } = api.profile.getUserByUsername.useQuery({
    username: "0xdead",
  });
  console.log("data", data);

  return {
    props: {
      hello: data,
    },
  };
}

export async function getServerSideProps(context: any) {
  const { params, req, res } = context;
  const slug = params.slug;
  console.log("parandsfjknvedikv", slug);
  const { data } = api.profile.getUserByUsername.useQuery({
    username: "0xdead",
  });
  console.log("data", data);

  return {
    props: {
      hello: data,
    },
  };
}

throwing an error about how i cant use the useQuery hook in getServerSideProps which makes sense yeah? so how do i do that?

57 Replies

Brendonovich•2y ago

use the server-side helpers: https://trpc.io/docs/client/nextjs/server-side-helpers

Server-Side Helpers | tRPC

The server-side helpers provides you with a set of helper functions that you can use to prefetch queries on the server. This is useful for SSG, but also for SSR if you opt not to use ssr: true.

MjOP•2y ago

appreciate the help. after implementing SSH, im getting this error

MjOP•2y ago

Brendonovich•2y ago

what are you passing to router

MjOP•2y ago

my profile router

Brendonovich•2y ago

you probably wanna pass in your root router yea idk what the behaviour is if you pass in a sub router

MjOP•2y ago

ohh from root i thought i can pass it in directly

Brendonovich•2y ago

u might be able to and then remove the profle. part but idk if trpc will use the correct cache key in that case

MjOP•2y ago

working now. appreciate your help taking theos t3 course. do you have another t3 recommendation after this? trying to get very familiar with the stack

Brendonovich•2y ago

i haven't built anything with t3 haha ¯\_(ツ)_/¯ i just know a lot about the individual parts since we basically recrerated trpc in rust

MjOP•2y ago

oh wow. yet you know trpc so much hahaha okay. just realised im talking to a senior

Brendonovich•2y ago

and i know way more than i should about prisma bc i made prisma client rust

MjOP•2y ago

nice. tried to pick up rust, was too difficult so i ended up learning golang

Brendonovich•2y ago

nooooo another person lost to go

MjOP•2y ago

@brendonovich Clerk is really stressing me out. Can you help with something please?

Brendonovich•2y ago

Idk much about Clerk but ask away

MjOP•2y ago

so here's whats happening basically. following theos t3 tut, i had been using 1 github and 1 gmail account to sign into my app. tried to sign up as a new user now and it always defaults to my github account. i go through all of the process of selecting the gmail account to sign in with, authorize it then it redirects me to my apps homepage with my github logged in. jwt token is clearing from the browser so i know my initial signout is actually signing me out lmfao just figured out whats happening the new email im signing into is the email i used for the github account so it's seeing them as 1 user which is weird

MjOP•2y ago

Brendonovich•2y ago

ah yea i thought that might be it haha

MjOP•2y ago

hello @brendonovich sorry for the occasional tags but kindly help out please. following react query docs i'm finding it very difficult to understand or implement optimistic updates on my project

Brendonovich•2y ago

Basically when a mutation is triggered you manually update a query’s data, and if the query fails you roll it back

MjOP•2y ago

yes ser i know exactly thats whats happening, just dont know how from the docs. i apologize if my questions are basic lol. i'm very junior will post a screenshot of where i'm at now Here's my code so far

const {mutate} = api.posts.create.useMutation({
  // When mutate is called:
  onMutate: async (newPost) => {
    // Cancel any outgoing refetches
    // (so they don't overwrite our optimistic update)
    await queryClient.cancelQueries({ queryKey: ['posts'] })

    // Snapshot the previous value
    const previousPosts = queryClient.getQueryData(['posts'])

    // Optimistically update to the new value
    queryClient.setQueryData(['posts'], (old) => [...old, newPost])

    // Return a context object with the snapshotted value
    return { previousPosts }
  },
  // If the mutation fails,
  // use the context returned from onMutate to roll back
  onError: (err, newPost, context) => {
    queryClient.setQueryData(['post'], context.previousPosts)
  },
  // Always refetch after error or success:
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] })
  },
})

const {mutate} = api.posts.create.useMutation({
  // When mutate is called:
  onMutate: async (newPost) => {
    // Cancel any outgoing refetches
    // (so they don't overwrite our optimistic update)
    await queryClient.cancelQueries({ queryKey: ['posts'] })

    // Snapshot the previous value
    const previousPosts = queryClient.getQueryData(['posts'])

    // Optimistically update to the new value
    queryClient.setQueryData(['posts'], (old) => [...old, newPost])

    // Return a context object with the snapshotted value
    return { previousPosts }
  },
  // If the mutation fails,
  // use the context returned from onMutate to roll back
  onError: (err, newPost, context) => {
    queryClient.setQueryData(['post'], context.previousPosts)
  },
  // Always refetch after error or success:
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] })
  },
})

Im confused on the following.

    queryClient.setQueryData(['posts'], (old) => [...old, newPost])

    queryClient.setQueryData(['posts'], (old) => [...old, newPost])

above is returning this error Type 'unknown' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)

queryClient.setQueryData(['post'], context.previousPosts)

queryClient.setQueryData(['post'], context.previousPosts)

this is also returning this error 'context' is possibly 'undefined'.ts(18048) where is the context coming from?

queryClient.setQueryData(['posts'], (old) => [...old, newPost])

queryClient.setQueryData(['posts'], (old) => [...old, newPost])

i'd like to understand exactly what this is doing. especially how to implement the new post object because my post object should contain, createAt, title, and content and i should also be getting an author object from clerk so i'd get the profileImageUrl from it. how do i set those to a temporary object in the newpost?? kindly help please

Brendonovich•2y ago

Type 'unknown' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)

queryClient won't know about the types of your tRPC router since it's just a React Query thing, it has no relation to tRPC. tRPC has useContext that provides properly typed equivalents of each React Query function: https://trpc.io/docs/client/react/useContext#helpers. Would recommend using these instead of using queryClient.*

'context' is possibly 'undefined'.ts(18048)

I'd just return early if context is undefined

how do i set those to a temporary object in the newpost??

newPost contains all the data that's passed into the mutation, you can customise it as you wish. Idk what you'd do for the clerk stuff but yea u can chuck whatever in there

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...

MjOP•2y ago

same error sir

MjOP•2y ago

here's my code

const {mutate, isLoading: isPosting} = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        // Cancel any outgoing refetches
        // (so they don't overwrite our optimistic update)
        await utils.posts.getAll.cancel();
        //snapshot a previous value
        const posts = api.posts.getAll.useQuery();
        const previousPosts = posts.data;
        utils.posts.getAll.setData(undefined, (old) => {
          return [...old, newPost];
        });
      },

      onSettled: () => 
api.posts.getAll.useQuery().refetch(),
    });

const {mutate, isLoading: isPosting} = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        // Cancel any outgoing refetches
        // (so they don't overwrite our optimistic update)
        await utils.posts.getAll.cancel();
        //snapshot a previous value
        const posts = api.posts.getAll.useQuery();
        const previousPosts = posts.data;
        utils.posts.getAll.setData(undefined, (old) => {
          return [...old, newPost];
        });
      },

      onSettled: () => 
api.posts.getAll.useQuery().refetch(),
    });

import { api } from "~/utils/api"; const utils = api.useContext(); heres how i got both utils and api. can you explain their differences please?

Brendonovich•2y ago

Ah again just return early if old is undefined

barry•2y ago

const posts = api.posts.getAll.useQuery(); You can't just call it in the onMutate afaik?

MjOP•2y ago

kindly explain @thatbarryguy do you mean i should just do api.post.getAll.GetData()?

barry•2y ago

🤷 I just know you can't call a hook like that

MjOP•2y ago

whats the better way to call it? #noob can you help with the problem im facing? @thatbarryguy

Brendonovich•2y ago

Barry is right in that you can’t use useQuery there - you’ve incorrectly translated the previous code you had You should be using getData instead of useQuery since that’s the stated equivalent to getQueryData

MjOP•2y ago

const addPost = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        // optimistically update the cache
        await utils.posts.getAll.cancel();   // Cancel any outgoing refetches

  
        // Snapshot the previous value
        const previousPosts = utils.posts.getAll.getData();
  
        const fakeId = Math.random().toString();
  
       const optimisticPost: OptimisticPost = {
      id: fakeId,
      title: new Date(),
      content: newPost.content,
      authorId: "your-user-id", // Replace this with the actual user ID
      author: {
        id: "your-user-id",
        username: "your-username",
        profileImageUrl: "your-profile-image-url",
        name: "your-name",
      },
    };
  
        // Optimistically update with the new value by setting the cache
        utils.posts.getAll.setData(undefined, (old) => {
          return [...(old ?? []), optimisticPost];
        });
  
        // Return a context object with the snapshotted value
        return { previousPosts };
      },
  
      onError: (_err, _newPost, context) => {
        // If the mutation fails, use the context returned from onMutate to roll back!
        utils.posts.getAll.setData(undefined, (old) => context?.previousPosts ?? old);
      },
  
      onSettled: async () => {
        // make sure to invalidate when done
        await utils.post.all.invalidate();
      },
    });

const addPost = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        // optimistically update the cache
        await utils.posts.getAll.cancel();   // Cancel any outgoing refetches

  
        // Snapshot the previous value
        const previousPosts = utils.posts.getAll.getData();
  
        const fakeId = Math.random().toString();
  
       const optimisticPost: OptimisticPost = {
      id: fakeId,
      title: new Date(),
      content: newPost.content,
      authorId: "your-user-id", // Replace this with the actual user ID
      author: {
        id: "your-user-id",
        username: "your-username",
        profileImageUrl: "your-profile-image-url",
        name: "your-name",
      },
    };
  
        // Optimistically update with the new value by setting the cache
        utils.posts.getAll.setData(undefined, (old) => {
          return [...(old ?? []), optimisticPost];
        });
  
        // Return a context object with the snapshotted value
        return { previousPosts };
      },
  
      onError: (_err, _newPost, context) => {
        // If the mutation fails, use the context returned from onMutate to roll back!
        utils.posts.getAll.setData(undefined, (old) => context?.previousPosts ?? old);
      },
  
      onSettled: async () => {
        // make sure to invalidate when done
        await utils.post.all.invalidate();
      },
    });

Brendonovich•2y ago

Seems good

MjOP•2y ago

error

Argument of type '(old: { post: GetResult<{ id: string; title: Date; content: string | null; authorId: string; }, unknown> & {}; author: { id: string; username: string | null; profileImageUrl: string; name: string; }; }[] | undefined) => ({ ...; } | { ...; })[]' is not assignable to parameter of type 'Updater<{ post: GetResult<{ id: string; title: Date; content: string | null; authorId: string; }, unknown> & {}; author: { id: string; username: string | null; profileImageUrl: string; name: string; }; }[] | undefined, { ...; }[] | undefined>'.

Argument of type '(old: { post: GetResult<{ id: string; title: Date; content: string | null; authorId: string; }, unknown> & {}; author: { id: string; username: string | null; profileImageUrl: string; name: string; }; }[] | undefined) => ({ ...; } | { ...; })[]' is not assignable to parameter of type 'Updater<{ post: GetResult<{ id: string; title: Date; content: string | null; authorId: string; }, unknown> & {}; author: { id: string; username: string | null; profileImageUrl: string; name: string; }; }[] | undefined, { ...; }[] | undefined>'.

Brendonovich•2y ago

It’s hard to say since I don’t know where the error is occurring but it looks like one of your functions is returning the wrong value

MjOP•2y ago

utils.posts.getAll.setData(undefined, (old) => {
          return [...(old ?? []), optimisticPost];
        });

utils.posts.getAll.setData(undefined, (old) => {
          return [...(old ?? []), optimisticPost];
        });

this is where the error is coming from. if you dont mind ser, i could provide the repo link.

Brendonovich•2y ago

({ …; } | { …; })[] hints to me that the type of optimisticPost doesn’t match the rest of the items in old The array you’re returning could have 2 different types of elements I see you have an OptimisticPost type, which probably isn’t a good idea since you need to use the element type of the array returned from that query tRPC has utilities to extract return types from queries which you could use to give optimisticPost a correct type based on the return type of the query

MjOP•2y ago

thank you for your help so far ser yes i did that and assigned it to optimisticPost

 const { mutate, isLoading: isPosting } = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        // optimistically update the cache
        await utils.posts.getAll.cancel(); // Cancel any outgoing refetches

        // Snapshot the previous value
        const previousPosts = utils.posts.getAll.getData();

        const fakeId = Math.random().toString();

        const optimisticPost: optimisticPost = [
          {
            ...newPost,
            id: fakeId,
            title: new Date(),
            content: "This is the content of the post",
            authorId: "user_2TAzpA7V1ymtk5HFAnr5IbkFd0W",
          },
        ];

        // Optimistically update with the new value by setting the cache
        utils.posts.getAll.setData(undefined, (old: any) => {
          return [...old, ...optimisticPost];
        });

        // Return a context object with the snapshotted value
        return { previousPosts };
      },

      onError: (_err, _newPost, context) => {
        // If the mutation fails, use the context returned from onMutate to roll back!
        utils.posts.getAll.setData(
          undefined,
          (old) => context?.previousPosts ?? old
        );
      },

      onSettled: async () => {
        // invalidate when done
        await utils.posts.getAll.invalidate();
      },
    });

 const { mutate, isLoading: isPosting } = api.posts.create.useMutation({
      onMutate: async (newPost) => {
        // optimistically update the cache
        await utils.posts.getAll.cancel(); // Cancel any outgoing refetches

        // Snapshot the previous value
        const previousPosts = utils.posts.getAll.getData();

        const fakeId = Math.random().toString();

        const optimisticPost: optimisticPost = [
          {
            ...newPost,
            id: fakeId,
            title: new Date(),
            content: "This is the content of the post",
            authorId: "user_2TAzpA7V1ymtk5HFAnr5IbkFd0W",
          },
        ];

        // Optimistically update with the new value by setting the cache
        utils.posts.getAll.setData(undefined, (old: any) => {
          return [...old, ...optimisticPost];
        });

        // Return a context object with the snapshotted value
        return { previousPosts };
      },

      onError: (_err, _newPost, context) => {
        // If the mutation fails, use the context returned from onMutate to roll back!
        utils.posts.getAll.setData(
          undefined,
          (old) => context?.previousPosts ?? old
        );
      },

      onSettled: async () => {
        // invalidate when done
        await utils.posts.getAll.invalidate();
      },
    });

now i dont get any error in the console but it fetched every second so my UI glitches. i wonder if there's anything i did wrong here to cause that i know i could just invalidate after every post but i dont wanna give up on learning optimistic updates.

barry•2y ago

onSettled will keep running the invalidate no?

MjOP•2y ago

no thats not it. problem persists

barry•2y ago

I’m on phone can’t clone

MjOP•2y ago

oh i give up

Brendonovich•2y ago

you're defining components within components don't do that

Brendonovich•2y ago

wut

MjOP•2y ago

haha thanks for checking it out ser fixed that any feedback? probably all the debugging, didnt realise

Brendonovich•2y ago

i suspect the components in components may have caused the refetching but i'm not sure

MjOP•2y ago

i only have loader there i know you suggested i used trpc helper wrappers to implement it but will using react query queryClient directly work? do i have to do it the trpc way?

Brendonovich•2y ago

it'll probably work but i'd think you'd be doing yourself a disservice not having the types available

MjOP•2y ago

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

Brendonovich•2y ago

so much useCallback 🤦 not a knock on you, just saying haha

MjOP•2y ago

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

oh it's not my code lol. just one i saw on github that's working i was also wondering why he was using the callback hook a lot but what concerns me is his optimistic update query. kindly take a look ser is there a way to generate this type from prisma for my post query?

Brendonovich•2y ago

i mean it looks pretty normal i don't see why you'd use a prisma type when u can use the types from your trpc router

MjOP•2y ago

you mean using

type optimisticUpdates = RouterOptions[".."][".."]

type optimisticUpdates = RouterOptions[".."][".."]

something like that right? i did that too

Brendonovich•2y ago

yea are u having a problem with types or with the runtime logic?

MjOP•2y ago

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"
    }
  },
]

Brendonovich•2y ago

what's the error? and is it throwing an error or is typescript giving you an error?

MjOP•2y ago

hello sir. how do i pass data into a trpc useQuery wrapper? i'm trying to pass in refetchOnWindowFocus to my useQuery nevermind ser. got it noticed in trpc we pass a lot of undefined in our functions, why?

Gaming

Programming

How do i fetch data from a TRPC endpoint in getStaticProps and getServerSideProps?