How to properly type the initialValues argument provided to useHydrateAtoms in a reusable TestProvider

[vtrofin]

Hi @dai-shi , I hope I properly understood your request in #1900 and moved my question to this new Issue.

The problem i'm facing: I want to make a reusable <TestProvider /> component in typescript based on the example provided in the documentation. But, as much as i've tried, i haven't been able to properly type the initialValues prop and the only way I could make the ts checker stop complaining was to typecast initialValues as Array<readonly [AnyWritableAtom, never]>. I've seen in older discussion that it used to be possible to type the initialValue as Iterable<> but I wasn't able to use this in my current implementation.

Here is the code:

import { FunctionComponent, PropsWithChildren } from "react"
import { Provider, WritableAtom } from "jotai"
import { useHydrateAtoms } from "jotai/utils"

export type AnyWritableAtom = WritableAtom<unknown, never[], unknown>

interface InitialProps extends PropsWithChildren {
  initialValues: Array<readonly [AnyWritableAtom, unknown]>
}

const HydrateAtoms: FunctionComponent<InitialProps> = ({
  children,
  initialValues,
}) => {
  // Typecasting because i can't seem to make a generic type out of this one.
  useHydrateAtoms(initialValues as Array<readonly [AnyWritableAtom, never]>)

  return <>{children}</>
}

const JotaiTestProvider: FunctionComponent<InitialProps> = ({
  children,
  initialValues,
}) => {
  return (
    <Provider>
      <HydrateAtoms initialValues={initialValues}>{children}</HydrateAtoms>
    </Provider>
  )
}


const createAtomWrapper = (initialValues: InitialAtomValues) => {
  const AtomWrapper = ({ children }: PropsWithChildren) => (
    <JotaiTestProvider initialValues={initialValues}>
      {children}
    </JotaiTestProvider>
  )

  return AtomWrapper
}

My initial values are tuples of writable atoms - primitive atoms and atoms with storage. In the example below, the agentAtom is a class instance stored in a primitive atom, currentContactIdAtom is a string value stored in a primitive atom, and the callDurationDataAtom is an object stored in an atomWithStorage.

const { result } = renderHook(
        () => {
          return useCallDuration()
        },
        {
          wrapper: createAtomWrapper([
            [agentAtom, agent] as const,
            [callDurationDataAtom, null] as const,
            [currentContactIdAtom, taskId] as const,
          ]),
        },
      )

I would like to ask if there is a better way of doing this, if there is something i'm missing. Thank you in advance for any lead on better understanding this.

[vtrofin]

And immediately after opening this discussion i've noticed this one where the Iterable is used 🤦. Is the only solution to make a map out of the array of tuples?

type AnyWritableAtom = WritableAtom<unknown, never[], unknown>
export type InitialAtomValues = Iterable<readonly [AnyWritableAtom, unknown]>

interface InitialProps extends PropsWithChildren {
  initialValues: InitialAtomValues
}

const HydrateAtoms: FunctionComponent<InitialProps> = ({
  children,
  initialValues,
}) => {
  useHydrateAtoms(new Map(initialValues))

  return <>{children}</>
}

Sorry for not noticing the active Discussion before :(

[dai-shi]

I might not understand your problem correctly. Isn't it just typing issue? Can you just solve it with type assertion?

[vtrofin]

Hi, and thank you again. Yes, my problem is only related to typings. I wanted to not use type assertion, but to have a proper typing for the initialValues. I think in a rush I forgot present you with my actual error. So the code below would result in a type error

type AnyWritableAtom = WritableAtom<unknown, never[], unknown>
export type InitialAtomValues = Array<readonly [AnyWritableAtom, unknown]>

interface InitialProps extends PropsWithChildren {
  initialValues: InitialAtomValues
}

const HydrateAtoms: FunctionComponent<InitialProps> = ({
  children,
  initialValues,
}) => {
  useHydrateAtoms(initialValues)

  return <>{children}</>
}

and that error is:

test/fixtures/jotai_provider.tsx:16:19 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(values: (readonly [AnyWritableAtom, never])[], options?: (Options & { dangerouslyForceHydrate?: boolean | undefined; }) | undefined): void', gave the following error.
    Argument of type 'InitialAtomValues' is not assignable to parameter of type '(readonly [AnyWritableAtom, never])[]'.
      Type 'readonly [AnyWritableAtom, unknown]' is not assignable to type 'readonly [AnyWritableAtom, never]'.
        Type at position 1 in source is not compatible with type at position 1 in target.
          Type 'unknown' is not assignable to type 'never'.
  Overload 2 of 3, '(values: Map<AnyWritableAtom, unknown>, options?: (Options & { dangerouslyForceHydrate?: boolean | undefined; }) | undefined): void', gave the following error.
    Argument of type 'InitialAtomValues' is not assignable to parameter of type 'Map<AnyWritableAtom, unknown>'.
      Type '(readonly [AnyWritableAtom, unknown])[]' is missing the following properties from type 'Map<AnyWritableAtom, unknown>': clear, delete, get, has, and 3 more.
  Overload 3 of 3, '(values: (readonly [AnyWritableAtom, never])[], options?: (Options & { dangerouslyForceHydrate?: boolean | undefined; }) | undefined): void', gave the following error.
    Argument of type 'InitialAtomValues' is not assignable to parameter of type '(readonly [AnyWritableAtom, never])[]'.

16   useHydrateAtoms(initialValues)
                     ~~~~~~~~~~~~~


[12:13:45 PM] Found 1 error. Watching for file changes.

The only option i could find to fix the type error is this one presented below (replace unknown with never). I'm not a big fan of type assertions and would prefer the type checker to actually be happy with the provided typings.

 useHydrateAtoms(initialValues as Array<readonly [AnyWritableAtom, never]>)

I could also notice in discussion #2647 there is the possibility to simply create a map from the array of tuples and in this case the type checker doesn't complain anymore. I can confirm that converting the array to a map properly solves the type error.

type AnyWritableAtom = WritableAtom<unknown, never[], unknown>
export type InitialAtomValues = Iterable<readonly [AnyWritableAtom, unknown]>

interface InitialProps extends PropsWithChildren {
  initialValues: InitialAtomValues
}

const HydrateAtoms: FunctionComponent<InitialProps> = ({
  children,
  initialValues,
}) => {
  useHydrateAtoms(new Map(initialValues))

  return <>{children}</>
}

I was just wondering whether there is any possibility of better typing in my original example, the one where I leveraged the Array<readonly [AnyWritableAtom, unknown]> without relying on type assertions.

[dai-shi]

I wanted to not use type assertion

I see. Then, Map might be a good solution.

---

How about this?

Repro: https://tsplay.dev/WyLXAm
A possible fix: https://tsplay.dev/W4gxvm

import type { PropsWithChildren, FunctionComponent } from "react";
import type { WritableAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";

type AnyWritableAtom = WritableAtom<unknown, any[], unknown>;
export type InitialAtomValues = Array<readonly [AnyWritableAtom, unknown]>;

interface InitialProps extends PropsWithChildren {
  initialValues: InitialAtomValues;
}

const HydrateAtoms: FunctionComponent<InitialProps> = ({
  children,
  initialValues,
}) => {
  useHydrateAtoms(initialValues);

  return <>{children}</>;
};

[vtrofin]

Thank you very much for taking the time to look at my example. Indeed, using the any[] type makes the type error go away. That is a good alternative that I haven't been able to identify. I think in my case I'll rely on using the map example i've recently discovered in the discussions, just because it doesn't clash with the eslint rule:

 warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

Again, thank you very much for you availability to look into this issue.

[dai-shi]

You are welcome.

@typescript-eslint/no-explicit-any

Actually any -> unknown seems to work in this playground. https://tsplay.dev/Wz1eRm It might not work when using HydrateAtoms.

[dai-shi]

I hope I properly understood your request in #1900 and moved my question to this new Issue.

I actually mean to open a PR to see your suggestion, but if you need more discussion, this is much better than #1900.