useHydrateAtoms Typescript typing error

[asutula]

I saw this error with my own code, but just to make sure, copy/pasted the example usage of useHydrateAtoms from the docs at https://jotai.org/docs/utilities/ssr#usehydrateatoms.

import { atom, useAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";

type Props = {
  countFromServer: number;
};

const countAtom = atom(0);

const CounterPage = ({ countFromServer }: Props) => {
  useHydrateAtoms([[countAtom, countFromServer]]);
  const [count] = useAtom(countAtom);
  // count would be the value of `countFromServer`, not 0.
};

which results in the following error:

Type '(number | (PrimitiveAtom<number> & WithInitialValue<number>))[]' is not assignable to type 'readonly [AnyWritableAtom, unknown]'.
            Target requires 2 element(s) but source may have fewer.

Has anyone used usedHydrateAtoms with success? Am I doing something wrong? Thanks.

[dai-shi]

TypeScript playground doesn't show errors: https://tsplay.dev/wQRE1N
Can you try strict: true in tsconfig?

[asutula]

My project already uses strict: true. Strange. Going to look at my code again to be sure I'm not making some strange mistake.

[asutula]

I just used Github codespaces to create a fresh Next JS Typescript project and I see the error there as well. You can clone the repo at https://github.com/asutula/hydrate-test and the test file is in src/components/hydrate.tsx.

[dai-shi]

Can you find any difference in tsconfig.json from the typescript playground one?

[asutula]

I couldn't spot any meaningful differences. I adjusted some things in the playground tsconfig to make it more similar to my project's tsconfig, but the playground still worked fine.

Apart from that, maybe this is a useful clue?... I can get the tuple argument to be typed properly using the as const specifier. This works:

import { atom, useAtom, Atom, PrimitiveAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";

type Props = {
  countFromServer: number;
};

const countAtom = atom(0);

const CounterPage = ({ countFromServer }: Props) => {
  useHydrateAtoms([[countAtom, countFromServer] as const]);
  const [count] = useAtom(countAtom);
  // count would be the value of `countFromServer`, not 0.
};

But I'm still not sure why the original problem exists.

[himself65]

The reason is "target": "es5"

[himself65]

One fix is to change es5 to es6.

Another fix is to add as const

[himself65]

Related: microsoft/TypeScript#4031

[dai-shi]

One fix is to change es5 to es6.

Is it about the app config, or jotai one?

[himself65]

app config

[himself65]

One fix is to change es5 to es6.

Is it about the app config, or jotai one?

https://github.com/asutula/hydrate-test/blob/e31267ce98fb8a7b2bcd97049a1e7d48d43cc914/tsconfig.json#L3

[vtrofin]

Greetings from Kyoto! I'm trying to set-up a provider for a few atoms in a test environment (Primitive atoms and Atoms with Storage). I'm using vitest and happy DOM. I've implemented the suggested TestProvider as suggested here https://jotai.org/docs/guides/testing#injected-values .

My problem is with the typing for the initialValues. The only way I could make typescript stop complaining is by typecasting my initialValues as initialValues as Array<readonly [AnyWritableAtom, never]>. I'm guessing the never is the last condition in the ternary below

type InferAtomTuples<T> = {
    [K in keyof T]: T[K] extends readonly [infer A, unknown] ? A extends WritableAtom<unknown, infer Args, infer _Result> ? readonly [A, Args[0]] : T[K] : never;
};

Any idea how this reusable TestProvider from the documentation might be typed such that there is no need to typecast? Here is my attempt below:

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>
  )
}

Thank you for any potential response or suggestion!

[dai-shi]

Yeah, it looks good. Can you open a new PR and discuss there?

[vtrofin]

Hi @dai-shi , thank you for the response. I've opened a new issue for this discussion #2650 .