tRPC•7mo ago

Network request was successful, variable was not populated

I'm fetching the data, json is being returned, but trying to use this data is impossible

Solution

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

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

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

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

Jump to solution

DawsonOP•6/15/25, 2:19 PM

"use client";

import { useTRPC } from "@/utils/trpc";
import { useQuery } from "@tanstack/react-query";

export default function Test() {
  const trpc = useTRPC();

  const response = useQuery(trpc.server.getServers.queryOptions());

  return <div>{JSON.stringify(response.data)}</div>;
}

"use client";

import { useTRPC } from "@/utils/trpc";
import { useQuery } from "@tanstack/react-query";

export default function Test() {
  const trpc = useTRPC();

  const response = useQuery(trpc.server.getServers.queryOptions());

  return <div>{JSON.stringify(response.data)}</div>;
}

is the code im using

DawsonOP•6/15/25, 2:20 PM

TRPC Provider https://paste.learnspigot.com/bonowevari.js

LearnSpigot: Send and save code snippets on our pastebin

LearnSpigot provides a free web-based pastebin service for storing and sharing code snippets with anyone. Powered by hastebin.

Solution

Dawson•6/16/25, 10:32 AM

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

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

DawsonOP•6/16/25, 10:32 AM

this fixed it

"use client"; import { useTRPC } from "@/utils/trpc"; import { useQuery } from "@tanstack/react-query"; export default function Test() { const trpc = useTRPC(); const response = useQuery(trpc.server.getServers.queryOptions()); return <div>{JSON.stringify(response.data)}</div>; }

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