update examples

examples/01_typescript/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react'
+import React from 'react'
 import { useAtom } from 'jotai/react'
 import { atom } from 'jotai/vanilla'
 import { atomWithQuery } from 'jotai-tanstack-query'
@@ -14,7 +14,11 @@ const userAtom = atomWithQuery((get) => ({
 }))
 
 const UserData = () => {
-  const [data] = useAtom(userAtom)
+  const [{ data, isPending, isError }] = useAtom(userAtom)
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error</div>
+
   return <div>{JSON.stringify(data)}</div>
 }
 
@@ -36,9 +40,7 @@ const Controls = () => {
 const App = () => (
   <>
     <Controls />
-    <Suspense fallback="Loading...">
-      <UserData />
-    </Suspense>
+    <UserData />
   </>
 )
 

examples/02_typescript_suspense/src/App.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { useAtom } from 'jotai/react'
+import { atom } from 'jotai/vanilla'
+import { atomWithQuery } from 'jotai-tanstack-query'
+
+const idAtom = atom(1)
+
+const userAtom = atomWithQuery<object>((get) => ({
+  queryKey: ['users', get(idAtom)],
+  queryFn: async ({ queryKey: [, id] }) => {
+    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
+    return res.json()
+  },
+}))
+
+const UserData = () => {
+  const [{ data, isPending, isError }] = useAtom(userAtom)
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error</div>
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+const Controls = () => {
+  const [id, setId] = useAtom(idAtom)
+  return (
+    <div>
+      ID: {id}{' '}
+      <button type="button" onClick={() => setId((c) => c - 1)}>
+        Prev
+      </button>{' '}
+      <button type="button" onClick={() => setId((c) => c + 1)}>
+        Next
+      </button>
+    </div>
+  )
+}
+
+const App = () => (
+  <>
+    <Controls />
+    <UserData />
+  </>
+)
+
+export default App

examples/03_infinite/src/App.tsx

@@ -1,8 +1,8 @@
-import React, { Suspense } from 'react'
+import React from 'react'
 import { useAtom } from 'jotai/react'
-import { atomWithSuspenseInfiniteQuery } from 'jotai-tanstack-query'
+import { atomWithInfiniteQuery } from 'jotai-tanstack-query'
 
-const postsAtom = atomWithSuspenseInfiniteQuery(() => ({
+const postsAtom = atomWithInfiniteQuery(() => ({
   initialPageParam: 1,
   queryKey: ['posts'],
   queryFn: async ({ pageParam = 1 }) => {
@@ -17,23 +17,18 @@ const postsAtom = atomWithSuspenseInfiniteQuery(() => ({
 
 const Posts = () => {
   const [{ data, fetchNextPage }] = useAtom(postsAtom)
+
   return (
     <div>
       <button onClick={() => fetchNextPage()}>Next</button>
-      <ul>
-        {data.pages.map((item) => (
-          <li key={item.id}>{item.title}</li>
-        ))}
-      </ul>
+      <ul>{data?.pages.map((item) => <li key={item.id}>{item.title}</li>)}</ul>
     </div>
   )
 }
 
 const App = () => (
   <>
-    <Suspense fallback="Loading...">
-      <Posts />
-    </Suspense>
+    <Posts />
   </>
 )
 

examples/04_infinite_suspense/src/App.tsx

@@ -0,0 +1,40 @@
+import React, { Suspense } from 'react'
+import { useAtom } from 'jotai/react'
+import { atomWithSuspenseInfiniteQuery } from 'jotai-tanstack-query'
+
+const postsAtom = atomWithSuspenseInfiniteQuery(() => ({
+  initialPageParam: 1,
+  queryKey: ['posts'],
+  queryFn: async ({ pageParam = 1 }) => {
+    const res = await fetch(
+      `https://jsonplaceholder.typicode.com/posts/${pageParam}`
+    )
+    const data: { id: number; title: string } = await res.json()
+    return data
+  },
+  getNextPageParam: (lastPage) => lastPage.id + 1,
+}))
+
+const Posts = () => {
+  const [{ data, fetchNextPage }] = useAtom(postsAtom)
+  return (
+    <div>
+      <button onClick={() => fetchNextPage()}>Next</button>
+      <ul>
+        {data.pages.map((item) => (
+          <li key={item.id}>{item.title}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+const App = () => (
+  <>
+    <Suspense fallback="Loading...">
+      <Posts />
+    </Suspense>
+  </>
+)
+
+export default App

examples/05_mutation/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "jotai-tanstack-query-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@tanstack/query-core": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "jotai": "latest",
+    "jotai-tanstack-query": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "typescript": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

examples/05_mutation/public/index.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>jotai-tanstack-query example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

examples/05_mutation/src/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+const ele = document.getElementById('app')
+if (ele) {
+  createRoot(ele).render(React.createElement(App))
+}

examples/06_refetch/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "jotai-tanstack-query-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@tanstack/query-core": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "jotai": "latest",
+    "jotai-tanstack-query": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "typescript": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

examples/06_refetch/public/index.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>jotai-tanstack-query example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

examples/02_refetch/src/App.tsx → examples/06_refetch/src/App.tsx

@@ -1,5 +1,5 @@
-import React, { Suspense } from 'react'
-import { useAtom, useSetAtom } from 'jotai/react'
+import React from 'react'
+import { useAtom } from 'jotai/react'
 import { atom } from 'jotai/vanilla'
 import { atomWithQuery } from 'jotai-tanstack-query'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -16,7 +16,8 @@ const userAtom = atomWithQuery((get) => ({
 }))
 
 const UserData = () => {
-  const [{ data, refetch }] = useAtom(userAtom)
+  const [{ data, refetch, isPending }] = useAtom(userAtom)
+  if (isPending) return <div>Loading...</div>
   return (
     <div>
       <ul>
@@ -44,20 +45,12 @@ const Controls = () => {
   )
 }
 
-//TODO: fix error catching and retry
 const Fallback = ({ error, resetErrorBoundary }: FallbackProps) => {
-  const setId = useSetAtom(idAtom)
-  const [{ refetch }] = useAtom(userAtom)
-  const retry = () => {
-    setId(1)
-    refetch()
-    resetErrorBoundary()
-  }
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre>{error.message}</pre>
-      <button type="button" onClick={retry}>
+      <button type="button" onClick={resetErrorBoundary}>
         Try again
       </button>
     </div>
@@ -66,10 +59,8 @@ const Fallback = ({ error, resetErrorBoundary }: FallbackProps) => {
 
 const App = () => (
   <ErrorBoundary FallbackComponent={Fallback}>
-    <Suspense fallback="Loading...">
-      <Controls />
-      <UserData />
-    </Suspense>
+    <Controls />
+    <UserData />
   </ErrorBoundary>
 )
 

examples/06_refetch/src/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+const ele = document.getElementById('app')
+if (ele) {
+  createRoot(ele).render(React.createElement(App))
+}

package.json

@@ -36,10 +36,11 @@
     "jest": "jest",
     "tsc-test": "tsc --project . --noEmit",
     "examples:01_typescript": "DIR=01_typescript EXT=tsx webpack serve",
-    "examples:02_refetch": "DIR=02_refetch EXT=tsx webpack serve",
+    "examples:02_typescript_suspense": "DIR=02_typescript_suspense EXT=tsx webpack serve",
     "examples:03_infinite": "DIR=03_infinite EXT=tsx webpack serve",
-    "examples:04_mutation": "DIR=04_mutation EXT=tsx webpack serve",
-    "examples:05_async": "DIR=05_async EXT=tsx webpack serve"
+    "examples:04_infinite_suspense": "DIR=04_infinite_suspense EXT=tsx webpack serve",
+    "examples:05_mutation": "DIR=05_mutation EXT=tsx webpack serve",
+    "examples:06_refetch": "DIR=06_refetch EXT=tsx webpack serve"
   },
   "jest": {
     "testEnvironment": "jsdom",