Theo's Typesafe Cult•10mo ago

i need help on type

Solution:

```typescript export function StoreSetter<T extends keyof StoreType>({ store, data, }: {...

Jump to solution

29 Replies

erik.gh•10mo ago

bro what

DGCP3OP•10mo ago

i want to add type to data prop in StoreSetter component

erik.gh•10mo ago

and what’s the issue?

DGCP3OP•10mo ago

should i send screen shot or copy paste the error

erik.gh•10mo ago

both is fine

DGCP3OP•10mo ago

ok i did this few min ago and

export function StoreSetter<T extends keyof StoreType, K extends StoreType[keyof StoreType]["init"]>({
  store,
  data,
}: {
  store: T;
  data: K;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(data);

  return null;
}

export function StoreSetter<T extends keyof StoreType, K extends StoreType[keyof StoreType]["init"]>({
  store,
  data,
}: {
  store: T;
  data: K;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(data);

  return null;
}

DGCP3OP•10mo ago

then this error is shown at top of setAtom(data)

Solution

erik.gh•10mo ago

export function StoreSetter<T extends keyof StoreType>({
  store,
  data,
}: {
  store: T;
  data: ExtractAtomArgs<StoreType[T]>;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(...data);

  return null;
}

export function StoreSetter<T extends keyof StoreType>({
  store,
  data,
}: {
  store: T;
  data: ExtractAtomArgs<StoreType[T]>;
}) {
  const [, setAtom] = useAtom(stores[store]);

  setAtom(...data);

  return null;
}

erik.gh•10mo ago

with StoreSetter({store: 'write2', data: [""]})

DGCP3OP•10mo ago

i have another request if you dont mind

erik.gh•10mo ago

sure go ahead

DGCP3OP•10mo ago

its ok, to set setAtom(...data) like that right, when I use useeffect it throws a hydration error because initially, it render empty form then get populated

erik.gh•10mo ago

btw not sure if you really want to pass the parameters as object you could also do this:

export function StoreSetter<T extends keyof StoreType>(
  store: T,
  ...data: ExtractAtomArgs<StoreType[T]>
) {
  const [, setAtom] = useAtom(stores[store]);
  setAtom(...data);
  return null;
}

export function StoreSetter<T extends keyof StoreType>(
  store: T,
  ...data: ExtractAtomArgs<StoreType[T]>
) {
  const [, setAtom] = useAtom(stores[store]);
  setAtom(...data);
  return null;
}

and use it like this:

StoreSetter("write2", "jsdlfj", "second", "third", ...)

StoreSetter("write2", "jsdlfj", "second", "third", ...)

which i find to be nicer

DGCP3OP•10mo ago

erik.gh•10mo ago

so you want to use it as a component?

DGCP3OP•10mo ago

this is the whole picture, I have 5 tabs that are all client-side, and depending on the query(tab) URL I render them. but I want to fetch the initial data on the server side and pass the data to those tabs that contain multiple forms. so instead of drilling them via props, I created the store-setter component that receives data as a prop from the server side and sets the store. and the forms just get the initial data from the store.

erik.gh•10mo ago

okay i see then forget this ☝️

DGCP3OP•10mo ago

what do you think about this and btw this shows error when i use writable atom, but works with normal atom

erik.gh•10mo ago

tbh i am not really sure - haven't used jotai with server components yet so your approach is new to me

DGCP3OP•10mo ago

I didn't use it on the server side, i just passed data from the server side to the client(via prop) and then set the atom on the client side

erik.gh•10mo ago

yeah normally you'd use a useEffect for setting an atoms value

erik.gh•10mo ago

does this help: https://github.com/pmndrs/jotai/discussions/581

GitHub

Can an atom be initialised on the first render? · pmndrs jotai · Di...

I think I have a use case not sure if it's covered. I'm trying to replace a useState with useAtom but I can't provide an initial state with the atom except after the hook is initialised...

erik.gh•10mo ago

i think the provider approach is quite literally what you're building yourself rn

erik.gh•10mo ago

or this: https://jotai.org/docs/utilities/ssr

Jotai

SSR — Jotai, primitive and flexible state management for React

Jotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by combining atoms and renders are optimized based on atom dependency. This solves the extra re-render issue of React context and eliminates the need for memoization.

DGCP3OP•10mo ago

Yes you are right, but when I tried it it doesn't work Isn't this only supported only for next 12 and before that, next 13 broke it I think

erik.gh•10mo ago

yeah i think you're right

DGCP3OP•10mo ago

Maybe I should just use context with useReducer And using useEffect ain't possible, tried it it keeps failing, and without it it works fine🤞

DGCP3OP•10mo ago

thank you for your help mate

erik.gh•10mo ago

sure!

Gaming

Programming

i need help on type