nursing-lime

useSuspenseQuery when offline

What is the correct way to use useSuspenseQuery when offline?
I am using the

experimental_createPersister

experimental_createPersister

so the network mode is set to

offlineFirst

offlineFirst

. Whenever I render this when offline, and no data is persisted yet, the suspense fallback (

LoadingComponent

LoadingComponent

) keeps showing. Instead I want a placeholder to tell the user they are offline and they should retry when online.

      <QueryErrorResetBoundary>
        {({ reset }) => (
          <ErrorBoundary
            onReset={reset}
            FallbackComponent={GenericFallback}
          >
            <Suspense fallback={<LoadingComponent />}>
              // some code using const { data } = useSuspenseQuery(...)
            </Suspense>
          </ErrorBoundary>
        )}
      </QueryErrorResetBoundary>

      <QueryErrorResetBoundary>
        {({ reset }) => (
          <ErrorBoundary
            onReset={reset}
            FallbackComponent={GenericFallback}
          >
            <Suspense fallback={<LoadingComponent />}>
              // some code using const { data } = useSuspenseQuery(...)
            </Suspense>
          </ErrorBoundary>
        )}
      </QueryErrorResetBoundary>

TanStack•15mo ago

nursing-lime

useSuspenseQuery when offline

What is the correct way to use useSuspenseQuery when offline?
I am using the

experimental_createPersister

experimental_createPersister

so the network mode is set to

offlineFirst

offlineFirst

. Whenever I render this when offline, and no data is persisted yet, the suspense fallback (

LoadingComponent

LoadingComponent

) keeps showing. Instead I want a placeholder to tell the user they are offline and they should retry when online.

      <QueryErrorResetBoundary>
        {({ reset }) => (
          <ErrorBoundary
            onReset={reset}
            FallbackComponent={GenericFallback}
          >
            <Suspense fallback={<LoadingComponent />}>
              // some code using const { data } = useSuspenseQuery(...)
            </Suspense>
          </ErrorBoundary>
        )}
      </QueryErrorResetBoundary>

      <QueryErrorResetBoundary>
        {({ reset }) => (
          <ErrorBoundary
            onReset={reset}
            FallbackComponent={GenericFallback}
          >
            <Suspense fallback={<LoadingComponent />}>
              // some code using const { data } = useSuspenseQuery(...)
            </Suspense>
          </ErrorBoundary>
        )}
      </QueryErrorResetBoundary>

useSuspenseQuery when offline

Similar Threads

useSuspenseQuery when offline

Similar Threads

Similar Threads

Similar Threads