A Dan
A Dan2y 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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Jökull Sólberg
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 🙂
A Dan
A Dan2y ago
Thank you for the clarification