GD
Gadget Developers•2mo ago
Dan

How to type the server-side Gadget Context object in React Router 7 loader function?

Example loader function: 
// Server-side loader function
export const loader = async ({ params, context }: LoaderFunctionArgs) => {
  // access current authenticated shop
  const shop = await context.api.shopifyShop.findFirst({
    select: {
      id: true,
    },
  });

  return {
    shop,
  };
};
// Server-side loader function
export const loader = async ({ params, context }: LoaderFunctionArgs) => {
  // access current authenticated shop
  const shop = await context.api.shopifyShop.findFirst({
    select: {
      id: true,
    },
  });

  return {
    shop,
  };
};
How do I type the context parameter?
3 Replies
Chocci_Milk
Chocci_Milk•2mo ago
Hello, From my experience with React Router and Remix (in Gadget) the context.api should already be typed. Are you working with it locally or in the Gadget editor? When working locally, if there's any type issues, I recommend that you restart your TS server or seeing if you need to rerun ggt dev. When working in the Gadget editor it can be quite finicky but I recommend refreshing your tab or restarting your application. Generally, the intellisense and/or type server is either timing out or slow to load
Dan
DanOP•2mo ago
Solved the issue by importing import type { Route } from "./+types/gifts.$id"; and export const loader = async ({ params, context }: Route.LoaderArgs) => {
Chocci_Milk
Chocci_Milk•2mo ago
True! I forgot the way that route types work with RRv7. I've been mainly using Remix Good catch

Did you find this page helpful?