Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: update SSR and Query docs to include notes about TS and useHydrateAtom #2882

Merged
merged 3 commits into from
Dec 22, 2024
Merged

Docs: update SSR and Query docs to include notes about TS and useHydrateAtom #2882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
27f7224
Add Typescript note to Query Client example
rainagalbiati-turngate Dec 19, 2024
71b0a5a
docs: add ts instructions for useHydrateAtoms to query and ssr
rainagalbiati-turngate Dec 20, 2024
4793bb6
Merge branch 'main' into patch-1
dai-shi Dec 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/extensions/query.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,8 @@ Although they reference methods same query key (`'todos'`), the `onSuccess` inva

This will result in `todosAtom` showing stale data as it was not prompted to refetch.

⚠️ Note: When using **Typescript**, it is recommended to use a Map when passing the queryClient value to useHydrateAtoms. You can find a working example in the [Initializing State on Render docs](https://jotai.org/docs/guides/initialize-atom-on-render#using-typescript)

```jsx
import { Provider } from 'jotai/react'
import { useHydrateAtoms } from 'jotai/react/utils'
Expand Down
2 changes: 2 additions & 0 deletions docs/utilities/ssr.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ useHydrateAtoms([
] as const)
```

Or you may need to use a Map when passing the atom value to useHydrateAtoms. You can find a working example in the [Initializing State on Render docs](https://jotai.org/docs/guides/initialize-atom-on-render#using-typescript).

### Demo

<Stackblitz id="stackblitz-starters-b7cvxi" file="pages%2Findex.tsx" />
Expand Down
Loading