fix: support atom scope outside core (#589)

.size-snapshot.json

@@ -14,9 +14,9 @@
  }
  },
  "utils.js": {
- "bundled": 13479,
- "minified": 6775,
- "gzipped": 2544,
+ "bundled": 13716,
+ "minified": 6895,
+ "gzipped": 2574,
  "treeshaked": {
  "rollup": {
  "code": 28,
@@ -70,23 +70,23 @@
  }
  },
  "query.js": {
- "bundled": 5321,
- "minified": 2315,
- "gzipped": 721,
+ "bundled": 5444,
+ "minified": 2279,
+ "gzipped": 710,
  "treeshaked": {
  "rollup": {
- "code": 105,
+ "code": 80,
  "import_statements": 71
  },
  "webpack": {
- "code": 1131
+ "code": 1093
  }
  }
  },
  "xstate.js": {
- "bundled": 2977,
- "minified": 1314,
- "gzipped": 653,
+ "bundled": 3565,
+ "minified": 1470,
+ "gzipped": 684,
  "treeshaked": {
  "rollup": {
  "code": 29,
@@ -98,9 +98,9 @@
  }
  },
  "valtio.js": {
- "bundled": 1235,
- "minified": 598,
- "gzipped": 335,
+ "bundled": 1333,
+ "minified": 642,
+ "gzipped": 350,
  "treeshaked": {
  "rollup": {
  "code": 37,
@@ -112,9 +112,9 @@
  }
  },
  "zustand.js": {
- "bundled": 549,
- "minified": 262,
- "gzipped": 188,
+ "bundled": 647,
+ "minified": 306,
+ "gzipped": 204,
  "treeshaked": {
  "rollup": {
  "code": 14,
@@ -126,9 +126,9 @@
  }
  },
  "redux.js": {
- "bundled": 458,
- "minified": 220,
- "gzipped": 167,
+ "bundled": 516,
+ "minified": 248,
+ "gzipped": 180,
  "treeshaked": {
  "rollup": {
  "code": 14,
@@ -140,16 +140,16 @@
  }
  },
  "urql.js": {
- "bundled": 4312,
- "minified": 2311,
- "gzipped": 852,
+ "bundled": 4539,
+ "minified": 2369,
+ "gzipped": 856,
  "treeshaked": {
  "rollup": {
- "code": 199,
+ "code": 170,
  "import_statements": 85
  },
  "webpack": {
- "code": 1387
+ "code": 1355
  }
  }
  }

src/query.ts

@@ -1,4 +1,4 @@
-export { queryClientAtom, getQueryClientAtom } from './query/queryClientAtom'
+export { queryClientAtom } from './query/queryClientAtom'
 export { atomWithQuery } from './query/atomWithQuery'
 export { atomWithInfiniteQuery } from './query/atomWithInfiniteQuery'
 export type {

src/query/atomWithInfiniteQuery.ts

@@ -1,4 +1,5 @@
 import {
+ QueryClient,
  QueryKey,
  InfiniteQueryObserver,
  InfiniteQueryObserverOptions,
@@ -9,7 +10,7 @@ import {
 } from 'react-query'
 import { atom } from 'jotai'
 import type { WritableAtom, Getter } from 'jotai'
-import { getQueryClientAtom } from './queryClientAtom'
+import { queryClientAtom } from './queryClientAtom'
 
 export type AtomWithInfiniteQueryAction = {
  type: 'refetch' | 'fetchNextPage' | 'fetchPreviousPage'
@@ -39,11 +40,12 @@ export function atomWithInfiniteQuery<
  TError,
  TData,
  TQueryData
- >)
+ >),
+ getQueryClient: (get: Getter) => QueryClient = (get) => get(queryClientAtom)
 ): WritableAtom<InfiniteData<TData | TQueryData>, AtomWithInfiniteQueryAction> {
  const queryDataAtom = atom(
  (get) => {
- const queryClient = get(getQueryClientAtom)
+ const queryClient = getQueryClient(get)
  const options =
  typeof createQuery === 'function' ? createQuery(get) : createQuery
  let settlePromise:
@@ -75,6 +77,7 @@ export function atomWithInfiniteQuery<
  }
  })
  )
+ dataAtom.scope = queryAtom.scope
  let setData: (
  data: InfiniteData<TData> | Promise<InfiniteData<TData>>
  ) => void = () => {
@@ -128,6 +131,7 @@ export function atomWithInfiniteQuery<
  return { dataAtom, observer, options }
  },
  (get, _set, action: AtomWithInfiniteQueryAction) => {
+ queryDataAtom.scope = queryAtom.scope
  const { observer } = get(queryDataAtom)
  switch (action.type) {
  case 'refetch': {
@@ -151,10 +155,14 @@ export function atomWithInfiniteQuery<
  AtomWithInfiniteQueryAction
  >(
  (get) => {
+ queryDataAtom.scope = queryAtom.scope
  const { dataAtom } = get(queryDataAtom)
  return get(dataAtom)
  },
- (_get, set, action) => set(queryDataAtom, action) // delegate action
+ (_get, set, action) => {
+ queryDataAtom.scope = queryAtom.scope
+ set(queryDataAtom, action) // delegate action
+ }
  )
  return queryAtom
 }

src/query/atomWithQuery.ts

@@ -1,4 +1,5 @@
 import {
+ QueryClient,
  QueryKey,
  QueryObserver,
  QueryObserverOptions,
@@ -7,7 +8,7 @@ import {
 } from 'react-query'
 import { atom } from 'jotai'
 import type { WritableAtom, PrimitiveAtom, Getter } from 'jotai'
-import { getQueryClientAtom } from './queryClientAtom'
+import { queryClientAtom } from './queryClientAtom'
 
 export type AtomWithQueryAction = { type: 'refetch' }
 
@@ -26,7 +27,8 @@ export function atomWithQuery<
  | AtomWithQueryOptions<TQueryFnData, TError, TData, TQueryData>
  | ((
  get: Getter
- ) => AtomWithQueryOptions<TQueryFnData, TError, TData, TQueryData>)
+ ) => AtomWithQueryOptions<TQueryFnData, TError, TData, TQueryData>),
+ getQueryClient: (get: Getter) => QueryClient = (get) => get(queryClientAtom)
 ): WritableAtom<TData | TQueryData, AtomWithQueryAction> {
  const queryDataAtom: WritableAtom<
  {
@@ -36,7 +38,7 @@ export function atomWithQuery<
  AtomWithQueryAction
  > = atom(
  (get) => {
- const queryClient = get(getQueryClientAtom)
+ const queryClient = getQueryClient(get)
  const options =
  typeof createQuery === 'function' ? createQuery(get) : createQuery
  let settlePromise: ((data: TData | null, err?: TError) => void) | null =
@@ -60,6 +62,7 @@ export function atomWithQuery<
  }
  })
  )
+ dataAtom.scope = queryAtom.scope
  let setData: (data: TData | Promise<TData>) => void = () => {
  throw new Error('atomWithQuery: setting data without mount')
  }
@@ -108,6 +111,7 @@ export function atomWithQuery<
  (get, set, action: AtomWithQueryAction) => {
  switch (action.type) {
  case 'refetch': {
+ queryDataAtom.scope = queryAtom.scope
  const { dataAtom, observer } = get(queryDataAtom)
  set(dataAtom, new Promise<TData>(() => {})) // infinite pending
  const p = observer.refetch({ cancelRefetch: true }).then(() => {})
@@ -118,10 +122,14 @@ export function atomWithQuery<
  )
  const queryAtom = atom<TData | TQueryData, AtomWithQueryAction>(
  (get) => {
+ queryDataAtom.scope = queryAtom.scope
  const { dataAtom } = get(queryDataAtom)
  return get(dataAtom)
  },
- (_get, set, action) => set(queryDataAtom, action) // delegate action
+ (_get, set, action) => {
+ queryDataAtom.scope = queryAtom.scope
+ set(queryDataAtom, action) // delegate action
+ }
  )
  return queryAtom
 }

src/query/queryClientAtom.ts

@@ -1,8 +1,4 @@
 import { atom } from 'jotai'
 import { QueryClient } from 'react-query'
 
-export const queryClientAtom = atom<QueryClient | null>(null)
-
-export const getQueryClientAtom = atom(
- (get) => get(queryClientAtom) || new QueryClient()
-)
+export const queryClientAtom = atom(new QueryClient())

src/redux/atomWithStore.ts

@@ -14,7 +14,10 @@ export function atomWithStore<State, A extends Action = AnyAction>(
  return unsub
  }
  const derivedAtom = atom(
- (get) => get(baseAtom),
+ (get) => {
+ baseAtom.scope = derivedAtom.scope
+ return get(baseAtom)
+ },
  (_get, _set, action: A) => {
  store.dispatch(action)
  }

src/urql/atomWithMutation.ts

@@ -6,7 +6,7 @@ import {
 } from '@urql/core'
 import { atom } from 'jotai'
 import type { Getter } from 'jotai'
-import { getClientAtom } from './clientAtom'
+import { clientAtom } from './clientAtom'
 
 type MutationAction<Data, Variables extends object> = {
  variables?: Variables
@@ -16,16 +16,20 @@ type MutationAction<Data, Variables extends object> = {
 
 export function atomWithMutation<Data, Variables extends object>(
  createQuery: (get: Getter) => TypedDocumentNode<Data, Variables> | string,
- getClient: (get: Getter) => Client = (get) => get(getClientAtom)
+ getClient: (get: Getter) => Client = (get) => get(clientAtom)
 ) {
  const operationResultAtom = atom<
  OperationResult<Data, Variables> | Promise<OperationResult<Data, Variables>>
  >(
  new Promise<OperationResult<Data, Variables>>(() => {}) // infinite pending
  )
  const queryResultAtom = atom(
- (get) => get(operationResultAtom),
+ (get) => {
+ operationResultAtom.scope = queryResultAtom.scope
+ return get(operationResultAtom)
+ },
  (get, set, action: MutationAction<Data, Variables>) => {
+ operationResultAtom.scope = queryResultAtom.scope
  set(
  operationResultAtom,
  new Promise<OperationResult<Data, Variables>>(() => {}) // new fetch

src/urql/atomWithQuery.ts

@@ -8,7 +8,7 @@ import {
 } from '@urql/core'
 import { atom } from 'jotai'
 import type { Getter } from 'jotai'
-import { getClientAtom } from './clientAtom'
+import { clientAtom } from './clientAtom'
 
 type QueryArgs<Data, Variables extends object> = {
  query: TypedDocumentNode<Data, Variables> | string
@@ -19,7 +19,7 @@ type QueryArgs<Data, Variables extends object> = {
 
 export function atomWithQuery<Data, Variables extends object>(
  createQueryArgs: (get: Getter) => QueryArgs<Data, Variables>,
- getClient: (get: Getter) => Client = (get) => get(getClientAtom)
+ getClient: (get: Getter) => Client = (get) => get(clientAtom)
 ) {
  const queryResultAtom = atom((get) => {
  const client = getClient(get)
@@ -34,6 +34,7 @@ export function atomWithQuery<Data, Variables extends object>(
  resolve = r
  })
  )
+ resultAtom.scope = queryAtom.scope
  let setResult: (result: OperationResult<Data, Variables>) => void = () => {
  throw new Error('setting result without mount')
  }
@@ -69,6 +70,7 @@ export function atomWithQuery<Data, Variables extends object>(
  return { resultAtom, args }
  })
  const queryAtom = atom((get) => {
+ queryResultAtom.scope = queryAtom.scope
  const { resultAtom } = get(queryResultAtom)
  return get(resultAtom)
  })

src/urql/atomWithSubscription.ts

@@ -7,7 +7,7 @@ import {
 } from '@urql/core'
 import { atom } from 'jotai'
 import type { Getter } from 'jotai'
-import { getClientAtom } from './clientAtom'
+import { clientAtom } from './clientAtom'
 
 type SubscriptionArgs<Data, Variables extends object> = {
  query: TypedDocumentNode<Data, Variables> | string
@@ -17,7 +17,7 @@ type SubscriptionArgs<Data, Variables extends object> = {
 
 export function atomWithSubscription<Data, Variables extends object>(
  createSubscriptionArgs: (get: Getter) => SubscriptionArgs<Data, Variables>,
- getClient: (get: Getter) => Client = (get) => get(getClientAtom)
+ getClient: (get: Getter) => Client = (get) => get(clientAtom)
 ) {
  const queryResultAtom = atom((get) => {
  const client = getClient(get)
@@ -32,6 +32,7 @@ export function atomWithSubscription<Data, Variables extends object>(
  resolve = r
  })
  )
+ resultAtom.scope = queryAtom.scope
  let setResult: (result: OperationResult<Data, Variables>) => void = () => {
  throw new Error('setting result without mount')
  }
@@ -68,6 +69,7 @@ export function atomWithSubscription<Data, Variables extends object>(
  return { resultAtom, args }
  })
  const queryAtom = atom((get) => {
+ queryResultAtom.scope = queryAtom.scope
  const { resultAtom } = get(queryResultAtom)
  return get(resultAtom)
  })

src/urql/clientAtom.ts

@@ -1,12 +1,8 @@
 import { atom } from 'jotai'
-import { Client, createClient } from '@urql/core'
+import { createClient } from '@urql/core'
 
 const DEFAULT_URL =
  (typeof process === 'object' && process.env.JOTAI_URQL_DEFAULT_URL) ||
  '/graphql'
 
-export const clientAtom = atom<Client | null>(null)
-
-export const getClientAtom = atom(
- (get) => get(clientAtom) || createClient({ url: DEFAULT_URL })
-)
+export const clientAtom = atom(createClient({ url: DEFAULT_URL }))

src/utils/atomWithDefault.ts

@@ -11,13 +11,15 @@ export function atomWithDefault<Value>(getDefault: Read<Value>) {
  const overwrittenAtom = atom<Value | typeof EMPTY>(EMPTY)
  const anAtom: WritableAtom<Value, Update> = atom(
  (get) => {
+ overwrittenAtom.scope = anAtom.scope
  const overwritten = get(overwrittenAtom)
  if (overwritten !== EMPTY) {
  return overwritten
  }
  return getDefault(get)
  },
  (get, set, update) => {
+ overwrittenAtom.scope = anAtom.scope
  if (update === RESET) {
  set(overwrittenAtom, EMPTY)
  } else {