feat(react-query-4): set network mode to always for suspense (#1458)

# Overview

closed: #1442 

In React Query v4, the `OnlineManager` checks the client's network
status using `navigator.onLine`. However, this can sometimes cause bugs
in Chrome (Chromium-based browsers), where the network is incorrectly
detected as offline even when it is online.

To minimize this issue, React Query v5 no longer relies on
`navigator.onLine`.

In React Query v4, to minimize this issue, **networkMode is set to
always in Suspense Hooks**. This change ensures that TData in Suspense
remains guaranteed.

ref:

-
https://github.com/TanStack/query/blob/v4/packages/query-core/src/onlineManager.ts#L92
- TanStack/query#4753
- https://issues.chromium.org/issues/338514113

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>

.changeset/unlucky-trees-kick.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react-query-4": major
+---
+
+feat(react-query-4): set network mode to always

packages/react-query-4/src/SuspenseInfiniteQuery.test-d.tsx

@@ -98,6 +98,24 @@ describe('<SuspenseInfiniteQuery/>', () => {
         )}
       </SuspenseInfiniteQuery>
     ))()
+    ;(() => (
+      <SuspenseInfiniteQuery
+        queryKey={queryKey}
+        queryFn={queryFn}
+        //@ts-expect-error no networkMode
+        networkMode="always"
+      >
+        {(query) => (
+          <>
+            {query.data.pages
+              .filter(({ text }) => text)
+              .map((item, index) => (
+                <div key={index}>{item.text}</div>
+              ))}
+          </>
+        )}
+      </SuspenseInfiniteQuery>
+    ))()
     ;(() => (
       <SuspenseInfiniteQuery queryKey={queryKey} queryFn={queryFn}>
         {(query) => {

packages/react-query-4/src/SuspenseQuery.test-d.tsx

@@ -57,6 +57,16 @@ describe('<SuspenseQuery/>', () => {
         {(query) => <>{query.data.text}</>}
       </SuspenseQuery>
     ))()
+    ;(() => (
+      <SuspenseQuery
+        queryKey={queryKey}
+        queryFn={queryFn}
+        //@ts-expect-error no networkMode
+        networkMode="always"
+      >
+        {(query) => <>{query.data.text}</>}
+      </SuspenseQuery>
+    ))()
     ;(() => (
       <SuspenseQuery queryKey={queryKey} queryFn={queryFn}>
         {(query) => {

packages/react-query-4/src/infiniteQueryOptions.ts

@@ -20,6 +20,7 @@ export type SelectedInfiniteOptions<
     | 'enabled'
     | 'refetchInterval'
     | 'initialData'
+    | 'networkMode'
   >,
   'queryKey' | 'queryFn'
 > & {
@@ -45,6 +46,7 @@ export type UnSelectedInfiniteOptions<
     | 'enabled'
     | 'refetchInterval'
     | 'initialData'
+    | 'networkMode'
   >,
   'queryKey' | 'queryFn'
 > & {

packages/react-query-4/src/queryOptions.ts

@@ -22,6 +22,7 @@ export type SelectedQueryOptions<
     | 'enabled'
     | 'refetchInterval'
     | 'initialData'
+    | 'networkMode'
   >,
   'queryKey' | 'queryFn'
 > & {
@@ -49,6 +50,7 @@ export type UnSelectedQueryOptions<
     | 'enabled'
     | 'refetchInterval'
     | 'initialData'
+    | 'networkMode'
   >,
   'queryKey' | 'queryFn'
 > & {

packages/react-query-4/src/useSuspenseInfiniteQuery.test-d.ts

@@ -38,6 +38,12 @@ describe('useSuspenseInfiniteQuery', () => {
       queryFn,
       // @ts-expect-error no isPlaceholderData
     }).isPlaceholderData
+    useSuspenseInfiniteQuery({
+      queryKey,
+      queryFn,
+      //@ts-expect-error no networkMode
+      networkMode: 'always',
+    })
 
     const infiniteQuery = useSuspenseInfiniteQuery({ queryKey, queryFn })
     expectTypeOf(infiniteQuery).toEqualTypeOf<UseSuspenseInfiniteQueryResult<{ text: string }>>()

packages/react-query-4/src/useSuspenseInfiniteQuery.ts

@@ -23,7 +23,7 @@ export type UseSuspenseInfiniteQueryOptions<
   TQueryKey extends QueryKey = QueryKey,
 > = OmitKeyof<
   UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
-  'suspense' | 'useErrorBoundary' | 'enabled' | 'placeholderData'
+  'suspense' | 'useErrorBoundary' | 'enabled' | 'placeholderData' | 'networkMode'
 >
 
 /**
@@ -43,5 +43,6 @@ export function useSuspenseInfiniteQuery<
     enabled: true,
     suspense: true,
     useErrorBoundary: true,
+    networkMode: 'always',
   }) as UseSuspenseInfiniteQueryResult<TData, TError>
 }

packages/react-query-4/src/useSuspenseQueries.test-d.ts

@@ -34,6 +34,13 @@ describe('useSuspenseQueries', () => {
           enabled: true,
           select,
         },
+        {
+          queryKey: [...queryKey, 4] as const,
+          queryFn,
+          // @ts-expect-error no networkMode
+          networkMode: 'always',
+          select,
+        },
         queryOptions({
           queryKey: [...queryKey, 4] as const,
           queryFn: () => Promise.resolve({ field: 'success' }),

packages/react-query-4/src/useSuspenseQuery.test-d.ts

@@ -37,6 +37,12 @@ describe('useSuspenseQuery', () => {
       queryFn,
       //@ts-expect-error no isPlaceholderData
     }).isPlaceholderData
+    useSuspenseQuery({
+      queryKey,
+      queryFn,
+      //@ts-expect-error no networkMode
+      networkMode: 'always',
+    })
 
     const result = useSuspenseQuery({ queryKey, queryFn })
     expectTypeOf(result).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()

packages/react-query-4/src/useSuspenseQuery.ts

@@ -14,7 +14,7 @@ export type UseSuspenseQueryOptions<
   TQueryKey extends QueryKey = QueryKey,
 > = OmitKeyof<
   UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-  'suspense' | 'useErrorBoundary' | 'enabled' | 'placeholderData'
+  'suspense' | 'useErrorBoundary' | 'enabled' | 'placeholderData' | 'networkMode'
 >
 
 /**
@@ -32,5 +32,6 @@ export function useSuspenseQuery<
     enabled: true,
     useErrorBoundary: true,
     suspense: true,
+    networkMode: 'always',
   }) as UseSuspenseQueryResult<TData, TError>
 }