Merge pull request #128

Author: ThaddeusJiang

.github/workflows/cd.yml

@@ -17,8 +17,8 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: '**/pnpm-lock.yaml'
       - run: pnpm install --frozen-lockfile
-      - run: pnpm test
       - run: pnpm run compile
+      - run: pnpm test
       - run: pnpm publish --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/ci.yml

@@ -2,7 +2,6 @@ name: CI
 
 on:
   push:
-  pull_request:
 
 jobs:
   test:
@@ -16,4 +15,5 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: '**/pnpm-lock.yaml'
       - run: pnpm install --frozen-lockfile
+      - run: pnpm compile
       - run: pnpm test

.github/workflows/pr.yml

@@ -1,5 +1,8 @@
 name: Publish Preview
-on: [push, pull_request]
+
+on:
+  pull_request:
+    types: [opened, synchronize]
 
 jobs:
   build:

README.md

@@ -16,7 +16,7 @@
   - [Suspense](#suspense)
     - [atomWithSuspenseQuery](#atomwithsuspensequery-usage)
     - [atomWithSuspenseInfiniteQuery](#atomwithsuspenseinfinitequery-usage)
-- [QueryClient Instance](#referencing-the-same-instance-of-query-client-in-your-project)
+- [QueryClient Instance](#referencing-the-same-instance-of-query-client)
 - [SSR Support](#ssr-support)
 - [Error Handling](#error-handling)
 - [Dev Tools](#devtools)
@@ -31,27 +31,26 @@ jotai-tanstack-query currently supports TanStack Query v5.
 In addition to `jotai`, you have to install `jotai-tanstack-query` and `@tanstack/query-core` to use the extension.
 
 ```bash
-yarn add jotai-tanstack-query @tanstack/query-core
+npm i jotai-tanstack-query @tanstack/query-core
 ```
 
 ### Incremental Adoption
 
-You can incrementally adopt `jotai-tanstack-query` in your app. It's not an all or nothing solution. You just have to ensure you are using the same QueryClient instance. [QueryClient Setup](#referencing-the-same-instance-of-query-client-in-your-project).
+You can incrementally adopt `jotai-tanstack-query` in your app. It's not an all or nothing solution. You just have to ensure you are using the same QueryClient instance. [same QueryClient](#referencing-the-same-instance-of-query-client).
 
 ```jsx
-# existing useQueryHook
-  const { data, isPending, isError } = useQuery({
-    queryKey: ['todos'],
-    queryFn: fetchTodoList
-  });
-
-# jotai-tanstack-query
-  const todosAtom = atomWithQuery(() => ({
-    queryKey: ['todos'],
-  }))
+// existing useQueryHook
+const { data, isPending, isError } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodoList,
+})
 
-  const [{ data, isPending, isError }] = useAtom(todosAtom)
+// jotai-tanstack-query
+const todosAtom = atomWithQuery(() => ({
+  queryKey: ['todos'],
+}))
 
+const [{ data, isPending, isError }] = useAtom(todosAtom)
 ```
 
 ### Exported functions
@@ -363,23 +362,23 @@ const Posts = () => {
 }
 ```
 
-### Referencing the same instance of Query Client in your project
+### Referencing the same instance of Query Client
 
-Perhaps you have some custom hooks in your project that utilises the `useQueryClient()` hook to obtain the `QueryClient` object and call its methods.
+Perhaps you have some custom hooks in your project that utilizes the `useQueryClient()` hook to obtain the `QueryClient` object and call its methods.
 
-To ensure that you reference the same `QueryClient` object, be sure to wrap the root of your project in a `<Provider>` and initialise `queryClientAtom` with the same `queryClient` value you provided to `QueryClientProvider`.
+To ensure that you reference the same `QueryClient` object, be sure to wrap the root of your project in a `<Provider>` and initialize `queryClientAtom` with the same `queryClient` value you provided to `QueryClientProvider`.
 
-Without this step, `useQueryAtom` will reference a separate `QueryClient` from any hooks that utilise the `useQueryClient()` hook to get the queryClient.
+Without this step, `useQueryAtom` will reference a separate `QueryClient` from any hooks that utilize the `useQueryClient()` hook to get the queryClient.
 
 Alternatively, you can specify your `queryClient` with `getQueryClient` parameter.
 
 #### Example
 
 In the example below, we have a mutation hook, `useTodoMutation` and a query `todosAtom`.
 
-We included an initialisation step in our root `<App>` node.
+We included an initialization step in our root `<App>` node.
 
-Although they reference methods same query key (`'todos'`), the `onSuccess` invalidation in `useTodoMutation` will not trigger **if the `Provider` initialisation step was not done.**
+Although they reference methods same query key (`'todos'`), the `onSuccess` invalidation in `useTodoMutation` will not trigger **if the `Provider` initialization step was not done.**
 
 This will result in `todosAtom` showing stale data as it was not prompted to refetch.
 
@@ -405,12 +404,16 @@ export const Root = () => {
   )
 }
 
-export const todosAtom = atomWithQuery((get) => {
-  return {
-    queryKey: ['todos'],
-    queryFn: () => fetch('/todos'),
-  }
-})
+export const todosAtom = atomWithQuery(
+  (get) => {
+    return {
+      queryKey: ["todos"],
+      queryFn: () => fetch("/todos"),
+    }
+  },
+  () => queryClient
+)
+
 
 export const useTodoMutation = () => {
   const queryClient = useQueryClient()
@@ -445,11 +448,7 @@ See [a working example](https://codesandbox.io/s/4gfp6z) to learn more.
 In order to use the Devtools, you need to install it additionally.
 
 ```bash
-$ npm i @tanstack/react-query-devtools
-# or
-$ pnpm add @tanstack/react-query-devtools
-# or
-$ yarn add @tanstack/react-query-devtools
+$ npm i @tanstack/react-query-devtools --save-dev
 ```
 
 All you have to do is put the `<ReactQueryDevtools />` within `<QueryClientProvider />`.

__tests__/atomWithQuery.spec.tsx

@@ -35,7 +35,7 @@ it('query basic test', async () => {
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
 
     return (
@@ -83,7 +83,7 @@ it('async query basic test', async () => {
     const { data, isPending, isError } = userData
 
     if (isPending) return <>loading</>
-    if (isError) return <>errorred</>
+    if (isError) return <>errored</>
 
     return (
       <>
@@ -127,7 +127,7 @@ it('query refetch', async () => {
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
 
     return (
@@ -187,7 +187,7 @@ it('query with enabled', async () => {
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
 
     return <div>slug: {data.response.slug}</div>
@@ -257,7 +257,7 @@ it('query with enabled 2', async () => {
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
     return <div>slug: {data.response.slug}</div>
   }
@@ -340,7 +340,7 @@ it('query with enabled (#500)', async () => {
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
 
     return <div>count: {data.response.count}</div>
@@ -452,7 +452,7 @@ it('query dependency test', async () => {
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
 
     return (
@@ -507,7 +507,7 @@ it('query expected QueryCache test', async () => {
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
 
     return (
@@ -673,7 +673,7 @@ it('renews the result when the query changes and a non stale cache is available'
     }
 
     if (isError) {
-      return <>errorred</>
+      return <>errored</>
     }
 
     return (

__tests__/atomWithSuspenseQuery.spec.tsx

@@ -110,7 +110,7 @@ describe('intialData test', () => {
       const { data, isError } = countData
 
       if (isError) {
-        return <>errorred</>
+        return <>errored</>
       }
 
       const count = data?.response.count
@@ -154,7 +154,7 @@ describe('intialData test', () => {
       const [countData] = useAtom(countAtom)
       const { data, isError } = countData
       if (isError) {
-        return <>errorred</>
+        return <>errored</>
       }
       const count = data?.response.count
       return (

examples/07_queries/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Atom, atom } from 'jotai'
 import { useAtom } from 'jotai/react'
 import { type AtomWithQueryResult, atomWithQueries } from 'jotai-tanstack-query'

examples/08_incremental_adoption/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jotai-tanstack-query example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/08_incremental_adoption/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "jotai-tanstack-query-example-incremental-adoption",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@tanstack/query-core": "latest",
+    "@tanstack/react-query": "latest",
+    "jotai": "latest",
+    "jotai-tanstack-query": "*",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@vitejs/plugin-react": "latest",
+    "typescript": "latest",
+    "vite": "latest"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

examples/08_incremental_adoption/src/App.tsx

@@ -0,0 +1,98 @@
+import { QueryClient, useQuery } from '@tanstack/react-query'
+import { Provider, useAtom } from 'jotai/react'
+import { atom } from 'jotai/vanilla'
+import { atomWithQuery } from 'jotai-tanstack-query'
+import { QueryClientProvider } from 'jotai-tanstack-query/react'
+
+const queryClient = new QueryClient()
+
+const idAtom = atom(1)
+
+const userAtom = atomWithQuery(
+  (get) => ({
+    queryKey: ['users', get(idAtom)],
+  }),
+  () => queryClient
+)
+
+const UserDataRawFetch = () => {
+  const [id] = useAtom(idAtom)
+  const { data, isPending, isError } = useQuery({
+    queryKey: ['users', id],
+    queryFn: async ({ queryKey: [, id] }) => {
+      const res = await fetch(
+        `https://jsonplaceholder.typicode.com/users/${id}`
+      )
+      return res.json()
+    },
+  })
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error</div>
+
+  return (
+    <>
+      <h2>Tanstack Query</h2>
+      <div>{JSON.stringify(data)}</div>
+    </>
+  )
+}
+
+const UserData = () => {
+  const [{ data, isPending, isError }] = useAtom(userAtom)
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error</div>
+
+  return (
+    <>
+      <h2>Jotai-Tanstack-Query</h2>
+      <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>
+      <div>
+        <button
+          type="button"
+          onClick={() =>
+            queryClient.setQueryData(['users', id], (old: any) => {
+              return {
+                ...old,
+                name: old.name + '🔄',
+              }
+            })
+          }>
+          Update User Data
+        </button>
+      </div>
+    </>
+  )
+}
+
+const App = () => (
+  <>
+    <QueryClientProvider client={queryClient}>
+      <Provider>
+        <Controls />
+        <UserDataRawFetch />
+        <UserData />
+      </Provider>
+    </QueryClientProvider>
+  </>
+)
+
+export default App