testsubject1137 Comments

testsubject1137

Posts Comments

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

Oh! "@tanstack/react-query": "^5.49.0",

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

Let me know if there are any code samples I can share to help you narrow it down.

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

@michaelschufi I actually just get one x-trpc-source: rsc call

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

I can test this for you tonight.

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

/trpc/server.ts

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

const caller = createCaller(createContext);

export const getQueryClient = cache(createQueryClient);

export const { HydrateClient, trpc: api } = createHydrationHelpers<AppRouter>(
  caller,
  getQueryClient,
);

const createContext = cache(() => {
  const heads = new Headers(headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});

const caller = createCaller(createContext);

export const getQueryClient = cache(createQueryClient);

export const { HydrateClient, trpc: api } = createHydrationHelpers<AppRouter>(
  caller,
  getQueryClient,
);

/trpc/react.tsx

let clientQueryClientSingleton: QueryClient | undefined = undefined;

const getQueryClient = () => {
  if (typeof window === "undefined") {
    // Server: always make a new query client
    return createQueryClient();
  }
  // Browser: use singleton pattern to keep the same query client
  return (clientQueryClientSingleton ??= createQueryClient());
};

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    api.createClient({
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          transformer,
          url: getTRPCUrl(),
          headers: () => {
            const headers = new Headers();
            headers.set("x-trpc-source", "nextjs-react");
            return headers;
          },
        }),
      ],
    }),
  );

  return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {props.children}
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </api.Provider>
  );
}

let clientQueryClientSingleton: QueryClient | undefined = undefined;

const getQueryClient = () => {
  if (typeof window === "undefined") {
    // Server: always make a new query client
    return createQueryClient();
  }
  // Browser: use singleton pattern to keep the same query client
  return (clientQueryClientSingleton ??= createQueryClient());
};

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    api.createClient({
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          transformer,
          url: getTRPCUrl(),
          headers: () => {
            const headers = new Headers();
            headers.set("x-trpc-source", "nextjs-react");
            return headers;
          },
        }),
      ],
    }),
  );

  return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {props.children}
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </api.Provider>
  );
}

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

I have not tested to see how many/which calls tRPC is making, but my auth does work just fine. However, I don't know if it makes any difference, but mine is set up a little differently. Maybe this will help a little. /server/api/trpc.ts

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const db = getDatabase();
  const user = await getUser();
  const { ctx, env, cf } = getRequestContext();

  return {
    db,
    user,
    cf: {
      ...ctx,
      env,
      ...cf,
    },
    ...opts,
  };
};

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

export const createCallerFactory = t.createCallerFactory;

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next({
    ctx: {
      ...ctx,
      // infers the `session` as non-nullable
      user: ctx.user,
    },
  });
});

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const db = getDatabase();
  const user = await getUser();
  const { ctx, env, cf } = getRequestContext();

  return {
    db,
    user,
    cf: {
      ...ctx,
      env,
      ...cf,
    },
    ...opts,
  };
};

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

export const createCallerFactory = t.createCallerFactory;

export const createTRPCRouter = t.router;

export const publicProcedure = t.procedure;

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next({
    ctx: {
      ...ctx,
      // infers the `session` as non-nullable
      user: ctx.user,
    },
  });
});

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

Do you have all of the packages locked to 403?

    "@trpc/client": "11.0.0-rc.403",
    "@trpc/next": "11.0.0-rc.403",
    "@trpc/react-query": "11.0.0-rc.403",
    "@trpc/server": "11.0.0-rc.403",

    "@trpc/client": "11.0.0-rc.403",
    "@trpc/next": "11.0.0-rc.403",
    "@trpc/react-query": "11.0.0-rc.403",
    "@trpc/server": "11.0.0-rc.403",

I know I had some unexpected behavior when I didn't.

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

This is how I'm doing it, and it's working on rc.403.

export const publicProcedure = t.procedure;

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next({
    ctx: {
      session: {
        ...ctx.session,
        user: ctx.session.user,
      },
    },
  });
});

export const publicProcedure = t.procedure;

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }

  return next({
    ctx: {
      session: {
        ...ctx.session,
        user: ctx.session.user,
      },
    },
  });
});

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

My guess is this is related: https://github.com/trpc/trpc/pull/5810

22 replies

TtRPC

•Created by Michael Schaufelberger on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

I think something changed between rc.403 and current RC versions. I switched from npm to pnpm today and it updated me to the latest RC and this broke. It started trying to run the client query on the server which caused my console to go nuts with a huge error output. Rolling back to 403 and it's working again.

22 replies