Vilian Posts

Vilian

•Created by Vilian on 8/4/2024 in #❓-help

How to query with async/await

I'm trying to initialise my react context store on mount with data coming from trpc. I'm using the t3 stack right now, and it's not immediately obvious on how to wait for the data to load before setting it in the store.. I'm using zustand and he is a snippet of my code

export const defaultInitState: State = {
  user: null,
  session: null,
  permissions: {
    user: false,
    admin: false
  },
  tenants: [],
  users: null
};

// Store
export const createUserStore = (initState: State = defaultInitState) => {
  return createStore<Store>()((set) => ({
    ...initState,
    reloadUsers: async () => {
      const query = api.users.all.useQuery();
      /// wait for query to be loaded and set the store's user data to the query data
    },
    reloadTenants: async () => {},

    reset: async () => {
      set(defaultInitState);

    }
  }));
};

export const defaultInitState: State = {
  user: null,
  session: null,
  permissions: {
    user: false,
    admin: false
  },
  tenants: [],
  users: null
};

// Store
export const createUserStore = (initState: State = defaultInitState) => {
  return createStore<Store>()((set) => ({
    ...initState,
    reloadUsers: async () => {
      const query = api.users.all.useQuery();
      /// wait for query to be loaded and set the store's user data to the query data
    },
    reloadTenants: async () => {},

    reset: async () => {
      set(defaultInitState);

    }
  }));
};

12 replies

TtRPC

•Created by Vilian on 8/24/2023 in #❓-help

nextjs app router `fetchRequestHandler`'s createContext doesn't run.

Hey there, I have the following code:

// /src/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '~/trpc/root';
import { ENV } from '~/env';
import { createTRPCContext } from '~/trpc/trpc';

const handler = (req: Request) =>
  fetchRequestHandler({
    req,
    router: appRouter,
    endpoint: '/api/trpc',
    onError: ({ path, error }) => {
      if (ENV.NODE_ENV !== 'development') return;
      console.error(
        `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message} `
      );
    },
    createContext: createTRPCContext,
  });

export { handler as GET, handler as POST };

// /src/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '~/trpc/root';
import { ENV } from '~/env';
import { createTRPCContext } from '~/trpc/trpc';

const handler = (req: Request) =>
  fetchRequestHandler({
    req,
    router: appRouter,
    endpoint: '/api/trpc',
    onError: ({ path, error }) => {
      if (ENV.NODE_ENV !== 'development') return;
      console.error(
        `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message} `
      );
    },
    createContext: createTRPCContext,
  });

export { handler as GET, handler as POST };

24 replies

TtRPC

•Created by Vilian on 4/1/2023 in #❓-help

context question

Why are the context examples only showing opinionated examples with next/react auth ? Also i find it very confusing that it is not mentioned in the docs what kind of arguments the context function is called with.

51 replies

TtRPC

•Created by Vilian on 3/29/2023 in #❓-help

Quickstart not working

2 replies