T
TanStack•4d ago
painful-plum

Including X-Request-Id in response header + request context

I'm having a bit of trouble achieving this, this is what I currently have (for setting the response header), and in my commented code I've got my previous implementation (for including in the request context), how do I get both to work? 
// server.ts
 import crypto from 'node:crypto';
 
 import { createStartHandler, defaultStreamHandler, defineHandlerCallback } from '@tanstack/react-start/server';
 import handler, { createServerEntry } from '@tanstack/react-start/server-entry';
 
 type RequestContext = {
     requestId: string;
 };
 
 declare module '@tanstack/react-start' {
     interface Register {
         server: {
             requestContext: RequestContext;
         };
     }
 }
 
 const customHandler = defineHandlerCallback((ctx) => {
     ctx.responseHeaders.set('X-Request-ID', crypto.randomUUID());
     return defaultStreamHandler(ctx);
 });
 
 const fetch = createStartHandler(customHandler);
 
 export default createServerEntry({
     fetch,
 });
 
 // export default createServerEntry({
 //     async fetch(request) {
 //         return handler.fetch(request, { context: { requestId: crypto.randomUUID() } });
 //     },
 // });
// server.ts
 import crypto from 'node:crypto';
 
 import { createStartHandler, defaultStreamHandler, defineHandlerCallback } from '@tanstack/react-start/server';
 import handler, { createServerEntry } from '@tanstack/react-start/server-entry';
 
 type RequestContext = {
     requestId: string;
 };
 
 declare module '@tanstack/react-start' {
     interface Register {
         server: {
             requestContext: RequestContext;
         };
     }
 }
 
 const customHandler = defineHandlerCallback((ctx) => {
     ctx.responseHeaders.set('X-Request-ID', crypto.randomUUID());
     return defaultStreamHandler(ctx);
 });
 
 const fetch = createStartHandler(customHandler);
 
 export default createServerEntry({
     fetch,
 });
 
 // export default createServerEntry({
 //     async fetch(request) {
 //         return handler.fetch(request, { context: { requestId: crypto.randomUUID() } });
 //     },
 // });
1 Reply
optimistic-gold
optimistic-gold•3d ago
global middleware will work (because that is how i did it) 
// start.tsx
import { createStart } from '@tanstack/react-start'

export const startInstance = createStart(() => ({
  defaultSsr: true,
  functionMiddleware: [...],
  requestMiddleware: [requestIdMiddleware],
  serializationAdapters: [...]
}))
// start.tsx
import { createStart } from '@tanstack/react-start'

export const startInstance = createStart(() => ({
  defaultSsr: true,
  functionMiddleware: [...],
  requestMiddleware: [requestIdMiddleware],
  serializationAdapters: [...]
}))

Did you find this page helpful?