Typescript errors when using useHydrateAtoms

[ioExpander]

Hi. I'm trying to properly use useHydrateAtoms according to the docs. The code works fine in the browser, however I am facing some typescript issues.
Here is a simplified example :

import { Provider, atom, useAtomValue } from "jotai";
import { useHydrateAtoms } from "jotai/utils";
import { type ReactNode } from "react";

const testAtom = atom("");

export default function JotaiTests() {
  return (
    <Provider>
      <AtomsHydrator atomValues={[[testAtom, "hello"]]}> // <----  TS ERROR HERE
        <MyComponent />
      </AtomsHydrator>
    </Provider>
  );
}

//This component contains all the states and the logic
function MyComponent() {
  const testAtomValue = useAtomValue(testAtom);
  return <div>{testAtomValue}</div>;
}

function AtomsHydrator({
  atomValues,
  children,
}: {
  atomValues: Parameters<typeof useHydrateAtoms>[0];
  children: ReactNode;
}) {
  useHydrateAtoms(atomValues);
  return children;
}

Which gives the following error :
Type '(string | (PrimitiveAtom<string> & WithInitialValue<string>))[][]' is not assignable to type 'InferAtomTuples<Iterable<readonly [AnyWritableAtom, unknown]>>'. Types of property '[Symbol.iterator]' are incompatible. Type '() => IterableIterator<(string | (PrimitiveAtom<string> & WithInitialValue<string>))[]>' is not assignable to type 'never'.ts(2322) JotaiBug.tsx(27, 3): The expected type comes from property 'atomValues' which is declared here on type 'IntrinsicAttributes & { atomValues: InferAtomTuples<Iterable<readonly [AnyWritableAtom, unknown]>>; children: ReactNode; }'

Digging further I've found that :

useHydrateAtoms([[testAtom, "hello"]]); is ok with typescript but
const value=[[testAtom, "hello]]; useHydrateAtoms(value); produces the same error.

Am I using the function properly ? Thank you very much.

[dai-shi]

It used to work, but now useHydrateAtoms's type has a bit of hack, which breaks the example.
Where did you find the example?

This would be a naive fix: https://tsplay.dev/WyQ9bW

import { WritableAtom, Provider, atom, useAtomValue } from "jotai";
import { useHydrateAtoms } from "jotai/utils";
import { type ReactNode } from "react";

const testAtom = atom("");

export default function JotaiTests() {
  return (
    <Provider>
      <AtomsHydrator atomValues={[[testAtom, "hello"]]}>
        <MyComponent />
      </AtomsHydrator>
    </Provider>
  );
}

//This component contains all the states and the logic
function MyComponent() {
  const testAtomValue = useAtomValue(testAtom);
  return <div>{testAtomValue}</div>;
}

function AtomsHydrator({
  atomValues,
  children,
}: {
  atomValues: Iterable<
    readonly [WritableAtom<unknown, [any], unknown>, unknown]
  >;
  children: ReactNode;
}) {
  useHydrateAtoms(atomValues as any);
  return children;
}

[ioExpander]

It used to work, but now useHydrateAtoms's type has a bit of hack, which breaks the example. Where did you find the example?

I used this : https://jotai.org/docs/guides/initialize-atom-on-render and came up with the TS part myself.
Let me try your proposed alternative.

[ioExpander]

I've tried your proposal. But we are trying to run our project with the rule : [@typescript-eslint/no-explicit-any](https://typescript-eslint.io/rules/no-explicit-any)

If we go this route, the following also works and seems less hacky to me :

import { Provider, atom, useAtomValue } from "jotai";
import { useHydrateAtoms } from "jotai/utils";
import { type ReactNode } from "react";

const testAtom = atom("");

export default function JotaiTests() {
  return (
    <Provider>
      <AtomsHydrator atomValues={[[testAtom, "hello"]]}>
        <MyComponent />
      </AtomsHydrator>
    </Provider>
  );
}

//This component contains all the states and the logic
function MyComponent() {
  const testAtomValue = useAtomValue(testAtom);
  return <div>{testAtomValue}</div>;
}

function AtomsHydrator({
  atomValues,
  children,
}: {
  atomValues: unknown;   // <--- TS hack #1
  children: ReactNode;
}) {
  useHydrateAtoms(atomValues as Parameters<typeof useHydrateAtoms>[0]); // <--- TS hack #2
  return children;
}

But I'm trying to avoid such hacks if possible.

[ioExpander]

I'll be honest, I had a look but I don't think I can understand or even try to fix the type definition on the useHydrateAtoms function. But the fact that const value=[[testAtom, "hello]]; useHydrateAtoms(value); raises an error probably means that something is wrong there.

Shall I open an issue ? A TS guru might help us find a good fix. 🙏

[dai-shi]

Well, useHydrateAtoms has overloaded types. Proper fix would be to make AtomHydrator overloaded. But, I think it's rather better DX with looser typing.

We don't need to open an issue. If you think it's a priority, I can investigate it later. Or, we can ask for contribution in Discord or Twitter.

[ioExpander]

Hi. thank you for the quick feedback. Jotai's good integration with typescript was a strong selling point for us.

This issue occurs in one of the key interfaces between our reusable components and the rest of the react app. Good typings here would definitively help us detect any potential issues with our code or with future jotai updates. Reverting to any or unkown kind of defeats this purpose...

So I would definitively love to see a fix for this. 🙏

[dai-shi]

I looked into this, but we don't have an ultimate solution, because TS can't extract types from overloaded function. Just considered about exporting an untyped util, but that's not nice. As a Map is untyped, my recommendation is the following:

https://tsplay.dev/WvQ0Qm

import { Provider, atom, useAtomValue, type WritableAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";
import { type ReactNode } from "react";

const testAtom = atom("");

export default function JotaiTests() {
  return (
    <Provider>
      <AtomsHydrator atomValues={[[testAtom, "hello"]]}>
        <MyComponent />
      </AtomsHydrator>
    </Provider>
  );
}

//This component contains all the states and the logic
function MyComponent() {
  const testAtomValue = useAtomValue(testAtom);
  return <div>{testAtomValue}</div>;
}

function AtomsHydrator({
  atomValues,
  children,
}: {
  atomValues: Iterable<readonly [WritableAtom<unknown, [any], unknown>, unknown]>;
  children: ReactNode;
}) {
  useHydrateAtoms(new Map(atomValues));
  return children;
}

[ioExpander]

Thank you. I've updated my code to reflect this recommendation.
Note that it required // eslint-disable-next-line @typescript-eslint/no-explicit-any for the atomValues definition.

As this is not straghtforward, maybe we should document this here : https://jotai.org/docs/guides/initialize-atom-on-render and here : https://jotai.org/docs/guides/typescript

[dai-shi]

Adding "TypeScript" section in https://jotai.org/docs/guides/initialize-atom-on-render would be good. Please feel free to open a PR to improve docs.

[ioExpander]

#2280 opened !

[rainagalbiati-turngate]

I fell into this same issue when trying to hydrate the queryClientAtom following the Query documentation with Typescript. This thread did eventually help me solve it. It might be helpful to link initialize-atom-on-render documentation to that one for typescript.