david Comments - tRPC

david

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

hm, i’m not 100% sure but i think it could be to do with the way you’ve setup your cookies, it might need to be modified with samesite: “none” and secure: true in the third argument of the response.cookies.set think you might have concerns about CSRF but you could try it at the very least to see if you stop having issues by doing that.. something like

response.cookies.set(“lat”, latParam, {
sameSite: “none”,
secure: true})

response.cookies.set(“lat”, latParam, {
sameSite: “none”,
secure: true})

i think you can also setup which domains the cookie can run with? so that might work? https://nextjs.org/docs/app/api-reference/functions/cookies alternatively yeah, proxying the request via your next js app might be another direction. just giving you the heads up that this might be what fixes the issue for you via the cookies

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

The main thing I wanted to check was whether you had credentials: "include", which you do—so that’s all good. just checking—on your tRPC server, how are you configuring your cookie policy? Are you setting SameSite=None if it’s a cross-origin request? If the frontend and backend are on different origins, browsers require these settings for cookies to work iirc. also, are you setting Access-Control-Allow-Credentials: true in your CORS config? (in express it’s just credentials:true i think)

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

ahmed can you show on your next client how the trpc config is setup by any chance?

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

sure it could work, but it could also be unnecessary if the root cause is cors/a credentials misconfiguration - you’re sort of masking the issue rather than fixing it directly in this case.. if you’d be up to check how the cookies are setup and your configs are working it could be useful before going down the proxy route. just my feeling

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

any chance you can send over some of the code you’re using to setup the cookie? similarly, in your react query context/config are you able to show some of that code as well? like how the trpc.createClient looks?

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

You’re saying you’re having issues with cross-site cookies, right? If the goal is to have tRPC communicating with your Next.js client app, can you clarify what exactly isn’t working? Are cookies not being sent at all, or are they not persisting across requests?

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

okay well hold on a sec, before going all in on proxying the request through next js you might want to look into trying to fix the CORS issue first no? otherwise you are trying to resolve a symptom than the actual issue? can try and help with that if i can

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

someone’s welcome to add if they want, personally i mean in some applications all things considered if this is the route you have to go through. transparent proxying the request via your next js app as its acting as a gateway now is probably fine? i’m imagining the reason for why you need to speak to the next api first is probably some security/auth setup in your next app, so outside of added round trip latency and assuming you’re not modifying the request body on the return (so that tRPC and react query knows how the data is saved) i don’t see any problems?

30 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

it’s been a while since i’ve worked on our tRPC project, happy to try and help if i can again @Ahmed Eid is the case that you’re basically just trying to have the request proxied through an older api and are asking about recommended practices?

30 replies

•Created by david on 7/17/2024 in #❓-help

How to treat mongoose/mongodb ObjectIDs as their serialized string values on the frontend?

Hey @BenZ just saw you upvoted. Incase it's of use to you, apologies realised I hadn't updated my thread. A sort of non-perfect solution i created was a utility function that wraps the return statement in any query, it is based off of the supported superjson types, i havent had any issues with it so far, your mileage may vary though!

/* eslint-disable @typescript-eslint/no-explicit-any */
import { ObjectId } from "bson";
import { Url } from "url";

// SuperJSON supported types
type SuperJSONSupportedTypes =
  | Date
  | Set<any>
  | Map<any, any>
  | RegExp
  | undefined
  | null
  | bigint
  | Url

type Jsonify<T> = T extends ObjectId
  ? string
  : T extends SuperJSONSupportedTypes
    ? T
    : T extends object
      ? { [K in keyof T]: Jsonify<T[K]> }
      : T;

export const jsonify = <T>(data: T): Jsonify<T> => {
  return data as unknown as Jsonify<T>;
};

/* eslint-disable @typescript-eslint/no-explicit-any */
import { ObjectId } from "bson";
import { Url } from "url";

// SuperJSON supported types
type SuperJSONSupportedTypes =
  | Date
  | Set<any>
  | Map<any, any>
  | RegExp
  | undefined
  | null
  | bigint
  | Url

type Jsonify<T> = T extends ObjectId
  ? string
  : T extends SuperJSONSupportedTypes
    ? T
    : T extends object
      ? { [K in keyof T]: Jsonify<T[K]> }
      : T;

export const jsonify = <T>(data: T): Jsonify<T> => {
  return data as unknown as Jsonify<T>;
};

e.g

 get_all_users: authenticatedProcedure.query(async ({ ctx }) => {
    const users = await User.find({})
      .select<{
        user_name: string;
      }>("user_name")
      .lean();

    return jsonify(users);
  }),

 get_all_users: authenticatedProcedure.query(async ({ ctx }) => {
    const users = await User.find({})
      .select<{
        user_name: string;
      }>("user_name")
      .lean();

    return jsonify(users);
  }),

3 replies

•Created by spaghet on 8/16/2024 in #❓-help

Need help with performance

@spaghet we had a discussion about this not so long ago here https://discord.com/channels/867764511159091230/1260588869967937556 i was initially concerned about the performance and diving head first before using it. as i mentioned in the discussion, the solution that worked for me (not saying it will necessarily work for everyone, or if it’ll be supported forever) was xTRPC which just outputs a generated type file that i use. the downside is you can no longer jump to file/type however personally ill take the extra minute or so it’ll take me to find whatever reference i’m looking for when i need to vs waiting for the language server every time other solutions were mentioned too https://github.com/algora-io/xtrpc

5 replies

•Created by Poonda on 8/11/2024 in #❓-help

Forward NextJs Request to TRPC Server

Hey, i’ll give my two cents but others might have better ideas. Any chance you could give some context to why you want to split the servers up firstly? Katt spoke about it somewhere a while ago, but if these are completely separate servers and not running off of the same service you’ll need to go over network for communication and look at the vanilla client https://trpc.io/docs/client/vanilla/setup. So you’d use that for your Next -> tRPC integration where Next calls your tRPC service. The tricky problem to solve would be type definitions, to be honest Im not quite sure how best you’d achieve this. My only recommendation is that you pass the tRPC type definitions to your NextJS client additionally and then use things like RouterOutput/RouterInput https://trpc.io/docs/client/vanilla/infer-types which would allow you to still keep your data typed whilst still communicating first via the Next Server (you’d have to setup endpoint management etc yourself). But I don’t think it’ll be possible to get the full type definitions if you aren’t communicating directly between tRPC. Unless you are basically mirroring endpoints between the next server and tRPC server it might be a bit tough to get the full feature set

30 replies

•Created by 2035Builder on 8/8/2024 in #❓-help

I commented my query out, but i still notice request are still been made. this is what my code look

My only other idea is that it's something to do with your TRPCProvider, if getHeaders is being called multiple times that would suggest either a higher level context is recalculating it I think, or that something is happening in your useSupabaseClient. I can't be too sure, so someone else would have to chime in if they have other advice. But my recommendation in situations like this would be to try and strip back your code as much as possible. So you have the most basic implementation created where you successfully have it so that only one request occurs. https://trpc.io/docs/client/react/setup Basically following the above here ^ (But hard coding the api.challenges.list.useQuery input etc..) Then, begin slowly adding things back until you can see where multiple requests occur.

14 replies

•Created by 2035Builder on 8/8/2024 in #❓-help

I commented my query out, but i still notice request are still been made. this is what my code look

@Sigo what happens if you hard code the values in? Something like the following:

  const { 
    data: challenges, 
    isLoading, 
    refetch,
    isRefetching
  } = api.challenges.list.useQuery(
     {
      limit: 50,
      skip: 0,
      id: 'your-user-id-here',
      startDate: new Date(),
      activities: [],
    },
    { enabled: true, trpc: { abortOnUnmount: true, }} 
  );

  const { 
    data: challenges, 
    isLoading, 
    refetch,
    isRefetching
  } = api.challenges.list.useQuery(
     {
      limit: 50,
      skip: 0,
      id: 'your-user-id-here',
      startDate: new Date(),
      activities: [],
    },
    { enabled: true, trpc: { abortOnUnmount: true, }} 
  );

Just to try and eliminate any external state variables first.

14 replies

•Created by 2035Builder on 8/8/2024 in #❓-help

I commented my query out, but i still notice request are still been made. this is what my code look

@Sigo sorry what request is being made here? is it the retrieval of supabase credentials occurring multiple times?

14 replies

•Created by toadmilk on 8/6/2024 in #❓-help

how do I fix this

should be quite high level in your application usually in your App.tsx

6 replies

•Created by toadmilk on 8/6/2024 in #❓-help

how do I fix this

@toadmilk is your app wrapped in the react query context provider? https://trpc.io/docs/client/react/setup shown here

6 replies

•Created by ryders_dad on 7/30/2024 in #❓-help

Is it possible to have more than one TRPC client (React Query)?

@ryders_dad might be a bit cumbersome to deal with, there was some similar convo about it on GH though. perhaps this can give you some direction? https://github.com/trpc/trpc/discussions/1990

3 replies

•Created by K1|ller on 7/31/2024 in #❓-help

how to import superjson in express?

@K1|ller happy to try and help, it's definitely not a bug, most likely a configuration issue - could you share your tsconfig? Here's my current tsconfig on the backend, i'm also using superjson & express.

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "useUnknownInCatchVariables": false,
    "outDir": "./dist",
    "rootDir": "./src",
    "moduleResolution": "bundler"
  },
  "include": ["src/**/*.ts", "environment.d.ts"],
  "exclude": ["node_modules"],
  "ts-node": {
    "swc": true
  }
}

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "useUnknownInCatchVariables": false,
    "outDir": "./dist",
    "rootDir": "./src",
    "moduleResolution": "bundler"
  },
  "include": ["src/**/*.ts", "environment.d.ts"],
  "exclude": ["node_modules"],
  "ts-node": {
    "swc": true
  }
}

4 replies

•Created by jacin on 7/30/2024 in #❓-help

How to try a Post request?

No description

4 replies