T
TanStack•7mo ago
rare-sapphire

Client context in middleware type is `undefined`

I want to send part of the client context to the server as part of a middleware I'm making. How do I change the type of the context that is passed to the client() function? Typescript is complaining it is undefined: Example from the docs: 
const requestLogger = createMiddleware()
  .client(async ({ next, context }) => {
    return next({
      sendContext: {
        // Send the workspace ID to the server
        workspaceId: context.workspaceId,
      },
    })
  })
  .server(async ({ next, data, context }) => {
    // Woah! We have the workspace ID from the client!
    console.log('Workspace ID:', context.workspaceId)
    return next()
  })
const requestLogger = createMiddleware()
  .client(async ({ next, context }) => {
    return next({
      sendContext: {
        // Send the workspace ID to the server
        workspaceId: context.workspaceId,
      },
    })
  })
  .server(async ({ next, data, context }) => {
    // Woah! We have the workspace ID from the client!
    console.log('Workspace ID:', context.workspaceId)
    return next()
  })
How do I make it know that context has workspaceId?
3 Replies
graceful-blue
graceful-blue•7mo ago
cc @Chris Horobin
eastern-cyan
eastern-cyan•7mo ago
Where is workspaceId being populated?
rare-sapphire
rare-sapphireOP•7mo ago
In my case, I am populating the equivalent of workspaceId in the loader of a route. Here's an anonymized example of what my route looks like: 
import { GENERIC_CONSTANT_ID } from '@/utils/constants';
import { createFileRoute, notFound, Outlet } from '@tanstack/react-router';
import { mainItemQueryOptions } from '@/dataAccess/itemQueries';
import { subDetailQueryOptions } from '@/dataAccess/detailQueries';

export const Route = createFileRoute('/_userArea/items/$itemId')({
  staleTime: 60_000,
  loader: async ({ params, context }) => {
    const { itemId } = params;

    const mainItem = await context.queryClient.ensureQueryData(
      mainItemQueryOptions(itemId),
    );
    const specificDetailText = await context.queryClient.ensureQueryData(
      subDetailQueryOptions({
        itemId,
        userSpecificId: context.currentUser.id,
        detailType: GENERIC_CONSTANT_ID,
      }),
    );

    if (!mainItem) {
      throw notFound();
    }

    return { mainItem, specificDetailText };
  }
});
import { GENERIC_CONSTANT_ID } from '@/utils/constants';
import { createFileRoute, notFound, Outlet } from '@tanstack/react-router';
import { mainItemQueryOptions } from '@/dataAccess/itemQueries';
import { subDetailQueryOptions } from '@/dataAccess/detailQueries';

export const Route = createFileRoute('/_userArea/items/$itemId')({
  staleTime: 60_000,
  loader: async ({ params, context }) => {
    const { itemId } = params;

    const mainItem = await context.queryClient.ensureQueryData(
      mainItemQueryOptions(itemId),
    );
    const specificDetailText = await context.queryClient.ensureQueryData(
      subDetailQueryOptions({
        itemId,
        userSpecificId: context.currentUser.id,
        detailType: GENERIC_CONSTANT_ID,
      }),
    );

    if (!mainItem) {
      throw notFound();
    }

    return { mainItem, specificDetailText };
  }
});
I'm trying to send mainItem.id from the client to the server in the middleware

Did you find this page helpful?