Yoers Posts - Answer Overflow

Yoers

•Created by Yoers on 1/5/2024 in #questions

Correct way to access session data, using server & client components

Typically in our old SSR apps, we'd wrap <SessionProvider session={session}> around our <App /> component, and use the hook useSession() to access the session object at any depth easily, without prop drilling. With server components there's a helper const session = await getServerAuthSession();, which can only be used in server components to retrieve session information server side. My question is this, if we need to access session data in a deeply nested client component, are the only options now;
1. Pass the servers session details down as props as deep as we need to client components (as we cannot use const session = await getServerAuthSession(); once we reach client components)
2. Revert back to wrapping our highest client component with <SessionProvider session={session}>, using useSession() to access the session object at any depth easily, without prop drilling. Is there a more pragmatic way on the server side I am missing?

15 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 12/21/2023 in #questions

Unable to --inspect tRPC endpoints

How is everyone debugging their endpoints, I'd like to breakpoint but chrome doesn't seem to recognise there's an instance running. See in the video, I have; - Added a log and debugger statement to create post (default install) - Can see the log in terminal, but debugger didn't trigger Any ideas?

5 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 12/21/2023 in #questions

Fresh install results in drizzle error on "npm run db:push"

16 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 3/26/2023 in #questions

Invalidating a single part of a larger query

I am fetching data as such const postQuery = api.primaryRouter.getPosts.useQuery({}); and rendering as a list. I would like to invalidate JUST a single ID, this is possible via scenario #3 here https://trpc.io/docs/reactjs/usecontext#invalidating-across-whole-routers For example, if I later update one of the posts, I update then fetch just the updated post as follows -

    userMutation.mutate(
      {
        id,
        increment,
      },
      {
        onSuccess: () => {
          console.log("success");
          utils.primaryRouter.getPosts
            .invalidate({
              id,
            })
            .catch((err) => {
              console.log(err);
            });
        },
      }
    );

    userMutation.mutate(
      {
        id,
        increment,
      },
      {
        onSuccess: () => {
          console.log("success");
          utils.primaryRouter.getPosts
            .invalidate({
              id,
            })
            .catch((err) => {
              console.log(err);
            });
        },
      }
    );

Now the problem is, as I never used an ID to fetch posts to begin with, that query doesn't get invalidated (as the tag is different). I'm not entirely sure what the correct way to optimally update just a single record in a "fetch all" type query is?

11 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 1/9/2023 in #questions

Are query keys supported in tRPC?

23 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 1/8/2023 in #questions

How to make tRPC calls from the server side

6 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 1/7/2023 in #questions

Best practice making multiple TRPC calls

I have one component, that needs to make two API calls. The first call callOne, happens on page load. callTwo should happen once the user selects data rendered from callOne, I'm having issue finding an elegant solution to this. My current solution is just the following within the component (this works, but callTwo is called much more than is required, including on page load, and every unrelated prop change).

  // TRPC calls
  const callOne = trpc.auth.getUserDatabases.useQuery();
  const callTwo = trpc.auth.getUserDatabaseFields.useQuery({
    databaseId: selectedDbId || "",
  });

  // Render
  <component dependent on callOne>
  <component dependent on callTwo>
  <component dependent on callTwo>

  // TRPC calls
  const callOne = trpc.auth.getUserDatabases.useQuery();
  const callTwo = trpc.auth.getUserDatabaseFields.useQuery({
    databaseId: selectedDbId || "",
  });

  // Render
  <component dependent on callOne>
  <component dependent on callTwo>
  <component dependent on callTwo>

I can think / have tried the following ways; 1) Make the second call in useEffect, that has a dependency on selectedDbId . This works given it were an API call using something like fetch, but making a TRPC call within useEffect results in the error Hooks can only be called inside of the body of a function component. 2) Have component 2/3 in the example conditionally render once the first call is complete. The issue is which component should then make the second call, and how would the data travel between them. 3) I wondered if there were some sort of skip option, such as callTwo = trpc.auth.getUserDatabaseFields.useQuery({ databaseId: selectedDbId || "" }, { skip: !selectedDbId }); as mentioned in apollo docs (https://github.com/trojanowski/react-apollo-hooks/issues/158#issuecomment-599809484) but I can't find anything similar in the TRPC / react-query docs. Some advice would be much appreciated

15 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 12/23/2022 in #questions

How do I type my query data?

4 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 12/23/2022 in #questions

The `protectedProcedure` doesn't seem protected?

It seems that all the function does, is check whether we've sent a username.
I have enabled "strategy: "jwt" in next-auth, so my understanding is that NextJS encrypts the token it's received from auth provider, and now uses this to determine whether we're logged in etc. In terms of making authenticated requests, should we not be doing something like decrypting the access_token in the protectedProcedure handler, and getting the user / scope from that, and then assume the user is actually who they say they are (rather than trusting the client who could send any username)

3 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 12/21/2022 in #questions

302 error when logging in with Discord

I have just done a fresh creation of t3-app, but i'm getting a 302 when the redirect URL is called for discord, same as this thread mentions https://github.com/t3-oss/create-t3-app/issues/952 However I am on next-auth version 4.18.6, any one else seen this?

2 replies

TTCTheo's Typesafe Cult

•Created by Yoers on 11/26/2022 in #questions

Is the server a 'custom server'

I'd like to understand how vercel prices the deployment - Is the server custom (https://nextjs.org/docs/advanced-features/custom-server), I.E would it be running at all times once you deploy to vercel, or does it start only @ the RPC invocation? - If it does only start for each invocation, I'm guessing something like a local sqlite DB wouldn't work with this setup, as it wouldn't persist between teardowns?

32 replies

Gaming

Programming