Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
xiduzo

t3-stack in figma plugin?

I want to use the t3-stack to write my figma plugin UI but I am struggling to use the trpc client.

I am getting a 
from origin 'null' has been blocked by CORS policy


when calling 
trpc.post.hello.useQuery({ text: "world" });


for

// Figma UI
const client = trpc.createClient({
    httpBatchLink({
      url: "http://localhost:3000/api/trpc",
      transformer: SuperJSON,
      headers: () => {
        const headers = new Headers();
        headers.set("x-trpc-source", "figma-plugin-ui");
        headers.set("Access-Control-Allow-Origin", "*");
        return headers;
      },
    }),
  ],
});

// next app api/[trpc]/route.ts
const createContext = async (req: NextRequest) => {
  req.headers.set("Access-Control-Allow-Origin", "*");
  req.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  req.headers.set("Access-Control-Allow-Headers", "*");
  return createTRPCContext({
    headers: req.headers,
  });
};


when I set the 
mode
 to 
no-cors
 the 
OPTIONS
 request is coming through

const client = trpc.createClient({
// ...
fetch: (url, options) => {
        return fetch(url, {
          ...options,
          mode: "no-cors",
        });
      }
})


But then I am getting the error 
TRPCClientError: Unexpected end of input
Was this page helpful?