use v5, add atomWithMutation, atomWithSuspense with existing tests

__tests__/01_basic_spec.tsx

@@ -1,17 +1,15 @@
 import {
-  atomsWithInfiniteQuery,
-  atomsWithMutation,
-  atomsWithQuery,
-  atomsWithQueryAsync,
+  atomWithInfiniteQuery,
+  atomWithMutation,
+  atomWithQuery,
   queryClientAtom,
 } from '../src/index'
 
 describe('basic spec', () => {
   it('should export functions', () => {
     expect(queryClientAtom).toBeDefined()
-    expect(atomsWithQuery).toBeDefined()
-    expect(atomsWithInfiniteQuery).toBeDefined()
-    expect(atomsWithMutation).toBeDefined()
-    expect(atomsWithQueryAsync).toBeDefined()
+    expect(atomWithQuery).toBeDefined()
+    expect(atomWithInfiniteQuery).toBeDefined()
+    expect(atomWithMutation).toBeDefined()
   })
 })

__tests__/atomWithMutation.tsx → __tests__/atomWithMutation_spec.tsx

@@ -1,21 +1,20 @@
 import React, { useState } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { useAtom } from 'jotai/react'
-import { atomsWithMutation } from '../src/index'
+import { atomWithMutation } from '../src/index'
 
-it('atomsWithMutation should be refreshed on unmount (#2060)', async () => {
+it('atomWithMutation should be refreshed on unmount (#2060)', async () => {
   let resolve: (() => void) | undefined
-  const [, testAtom] = atomsWithMutation<number, number, number, number>(
-    () => ({
-      mutationKey: ['test-atom'],
-      mutationFn: async (a) => {
-        await new Promise<void>((r) => {
-          resolve = r
-        })
-        return a
-      },
-    })
-  )
+  const mutateAtom = atomWithMutation<number, number>(() => ({
+    mutationKey: ['test-atom'],
+    mutationFn: async (a) => {
+      console.log('mutation triggered')
+      await new Promise<void>((r) => {
+        resolve = r
+      })
+      return a
+    },
+  }))
 
   function App() {
     const [mount, setMount] = useState<boolean>(true)
@@ -29,11 +28,11 @@ it('atomsWithMutation should be refreshed on unmount (#2060)', async () => {
   }
 
   function TestView() {
-    const [state, mutate] = useAtom(testAtom)
+    const [{ mutate, isPending, status }] = useAtom(mutateAtom)
     return (
       <div>
-        <p>status: {state.status}</p>
-        <button disabled={state.isLoading} onClick={() => mutate([1])}>
+        <p>status: {status}</p>
+        <button disabled={isPending} onClick={() => mutate(1)}>
           mutate
         </button>
       </div>
@@ -45,12 +44,10 @@ it('atomsWithMutation should be refreshed on unmount (#2060)', async () => {
   await findByText('status: idle')
 
   fireEvent.click(getByText('mutate'))
-  await findByText('status: loading')
+  await findByText('status: pending')
   resolve?.()
   await findByText('status: success')
 
-  fireEvent.click(getByText('mutate'))
-  await findByText('status: loading')
   fireEvent.click(getByText('unmount'))
   fireEvent.click(getByText('mount'))
   await findByText('status: idle')

__tests__/atomWithQuery_spec.tsx

@@ -28,9 +28,9 @@ it('query basic test', async () => {
   }))
   const Counter = () => {
     const [countData] = useAtom(countAtom)
-    const { data, isLoading, isError } = countData
+    const { data, isPending, isError } = countData
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -75,9 +75,9 @@ it('query refetch', async () => {
     },
   }))
   const Counter = () => {
-    const [{ data, isLoading, isError, refetch }] = useAtom(countAtom)
+    const [{ data, isPending, isError, refetch }] = useAtom(countAtom)
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -129,9 +129,9 @@ it('query no-loading with keepPreviousData', async () => {
   }))
   const Counter = () => {
     const [countData] = useAtom(countAtom)
-    const { data, isLoading, isError } = countData
+    const { data, isPending, isError } = countData
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -195,14 +195,14 @@ it('query with enabled', async () => {
   const Slug = () => {
     const [slugQueryData] = useAtom(slugQueryAtom)
 
-    const { data, isLoading, isError, status, fetchStatus } = slugQueryData
+    const { data, isPending, isError, status, fetchStatus } = slugQueryData
 
     //ref: https://tanstack.com/query/v4/docs/react/guides/dependent-queries
-    if (status === 'loading' && fetchStatus === 'idle') {
+    if (status === 'pending' && fetchStatus === 'idle') {
       return <div>not enabled</div>
     }
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -267,13 +267,13 @@ it('query with enabled 2', async () => {
 
   const Slug = () => {
     const [slugQueryAtomData] = useAtom(slugQueryAtom)
-    const { data, isError, isLoading, status, fetchStatus } = slugQueryAtomData
+    const { data, isError, isPending, status, fetchStatus } = slugQueryAtomData
 
-    if (status === 'loading' && fetchStatus === 'idle') {
+    if (status === 'pending' && fetchStatus === 'idle') {
       return <div>not enabled</div>
     }
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -351,9 +351,9 @@ it('query with enabled (#500)', async () => {
   const Counter = () => {
     const [countData] = useAtom(countAtom)
 
-    const { data, isLoading, isError } = countData
+    const { data, isPending, isError } = countData
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -416,9 +416,9 @@ it('query with initialData test', async () => {
   }))
   const Counter = () => {
     const [countData] = useAtom(countAtom)
-    const { data, isLoading, isError } = countData
+    const { data, isPending, isError } = countData
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -464,9 +464,9 @@ it('query dependency test', async () => {
 
   const Counter = () => {
     const [countData] = useAtom(countAtom)
-    const { data, isLoading, isError } = countData
+    const { data, isPending, isError } = countData
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -519,9 +519,9 @@ it('query expected QueryCache test', async () => {
   const Counter = () => {
     const [countData] = useAtom(countAtom)
 
-    const { data, isLoading, isError } = countData
+    const { data, isPending, isError } = countData
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }
 
@@ -538,9 +538,7 @@ it('query expected QueryCache test', async () => {
 
   const { findByText } = render(
     <StrictMode>
-      <Suspense fallback="loading">
-        <Counter />
-      </Suspense>
+      <Counter />
     </StrictMode>
   )
 
@@ -598,7 +596,7 @@ describe('error handling', () => {
       const [countData] = useAtom(countAtom)
 
       if ('data' in countData) {
-        if (countData.isLoading) {
+        if (countData.isPending) {
           return <>loading</>
         }
 
@@ -642,9 +640,9 @@ describe('error handling', () => {
     const Counter = () => {
       const [countData] = useAtom(countAtom)
 
-      const { data, isLoading, refetch } = countData
+      const { data, isPending, refetch } = countData
 
-      if (isLoading) {
+      if (isPending) {
         return <>loading</>
       }
 
@@ -715,9 +713,9 @@ it('renews the result when the query changes and a non stale cache is available'
   const Counter = () => {
     const setCurrentCount = useSetAtom(currentCountAtom)
     const [countData] = useAtom(countAtom)
-    const { data, isLoading, isError } = countData
+    const { data, isPending, isError } = countData
 
-    if (isLoading) {
+    if (isPending) {
       return <>loading</>
     }