Son•3y ago

zustand + trpc (basic data fetching)

im trying to use zustand with trpc, but having trouble setting some data to global state. What am i missing here?

import create from 'zustand';
import { trpc } from '../../utils/trpc';

interface TenantState {
  tickets: [];
  setTickets: any;
}

export const useTenantStore = create<TenantState>()((set, get) => ({
  tickets: [],
  setTickets: async (newTicket: any[]) => {
    set(() => ({ tickets: trpc.ticketService.getByTenantId.useQuery().data })); // problem area
  },
}));

import create from 'zustand';
import { trpc } from '../../utils/trpc';

interface TenantState {
  tickets: [];
  setTickets: any;
}

export const useTenantStore = create<TenantState>()((set, get) => ({
  tickets: [],
  setTickets: async (newTicket: any[]) => {
    set(() => ({ tickets: trpc.ticketService.getByTenantId.useQuery().data })); // problem area
  },
}));

i've also tried this with no luck

export const useTenantStore = create<TenantState>()((set, get) => ({
  allTickets: {},
  fetch: () => {
    const data = trpc.ticketService.getByTenantId.useQuery().data;
    set({ allTickets: data });
  },
}));

export const useTenantStore = create<TenantState>()((set, get) => ({
  allTickets: {},
  fetch: () => {
    const data = trpc.ticketService.getByTenantId.useQuery().data;
    set({ allTickets: data });
  },
}));

and this...

  React.useEffect(() => {
    fetch(trpc.ticketService.getByTenantId.useQuery());
  }, []);

  React.useEffect(() => {
    fetch(trpc.ticketService.getByTenantId.useQuery());
  }, []);

  const fetch = useTenantStore((state) => state.fetch);

  const fetch = useTenantStore((state) => state.fetch);

export const useTenantStore = create<TenantState>()((set, get) => ({
  allTickets: {},
  fetch: async (url: any) => {
    const data = url.data;
    set({ allTickets: data });
  },
}));

export const useTenantStore = create<TenantState>()((set, get) => ({
  allTickets: {},
  fetch: async (url: any) => {
    const data = url.data;
    set({ allTickets: data });
  },
}));

3 Replies

Unknown User•3y ago

Message Not Public

Jökull Sólberg•3y ago

I would also perhaps advise against this pattern ... the react-query cache is as global as zustand, so why not use that instead? Maybe I'm missing something 🙂

SonOP•3y ago

Thank you for the clarification

zustand + trpc (basic data fetching)

Did you find this page helpful?