conscious-sapphire•4w ago

is there any reason for refine not to work offline?

I was just flying and noticed two things: 1) refine.dev does telemetry by default 2) none of my providers where being called Is there a reason for refine not to work offline? Could it be a react-query configuration (i know theres a mode that when offline does not do calls) Im using Remix and my API is in Hono

5 Replies

kapa.ai•4w ago

Hi @Juan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there are a few reasons why your Refine application might not work offline by default. Here are the key points to consider: 1. Telemetry by Default: Refine does telemetry by default, which might cause issues when there is no internet connection. You can disable telemetry by setting the disableTelemetry option to true in the <Refine /> component. 2. React Query Configuration: Refine uses @tanstack/query (formerly React Query) for data fetching, caching, and state management. By default, @tanstack/query prevents requests from being made when there is no network connection. This is likely why your providers are not being called when offline. To make your Refine application work offline, you need to configure the networkMode option in the reactQuery props of the <Refine /> component. You can set it to "always" or "offlineFirst" to ensure that requests are made regardless of the network state. Here is an example configuration to make your Refine application work offline:

<Refine
  // ...
  options={{
    // ...
    disableTelemetry: true, // Disable telemetry
    reactQuery: {
      clientConfig: {
        defaultOptions: {
          queries: {
            networkMode: "always", // Ensure queries are made regardless of network state
          },
          mutations: {
            networkMode: "always", // Ensure mutations are made regardless of network state
          },
        },
      },
    },
  }}
/>

<Refine
  // ...
  options={{
    // ...
    disableTelemetry: true, // Disable telemetry
    reactQuery: {
      clientConfig: {
        defaultOptions: {
          queries: {
            networkMode: "always", // Ensure queries are made regardless of network state
          },
          mutations: {
            networkMode: "always", // Ensure mutations are made regardless of network state
          },
        },
      },
    },
  }}
/>

This configuration ensures that both queries and mutations are executed even when there is no internet connection. For more details, you can refer to the Refine FAQ (https://refine.dev/docs/guides-concepts/faq/#how-to-work-offline-in-local-environment) and the React Query Network Mode documentation (https://tanstack.com/query/latest/docs/react/guides/network-mode). If you encounter any type errors while setting the networkMode, ensure that you are using the correct type for the networkMode option as shown in the example above. By making these adjustments, your Refine application should be able to work offline effectively. Sources: - Refine FAQ on working offline (https://refine.dev/docs/guides-concepts/faq/#how-to-work-offline-in-local-environment) - GitHub Issue on offline mode (https://github.com/refinedev/refine/issues/5510) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1006845905388970045> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•4w ago

Did You manage to disable the telemetry? I cannot find the telemetry setting that bot mentioned

conscious-sapphire•4w ago

yes

<Refine
        options={{
          disableTelemetry: true,
          reactQuery: {
            clientConfig: {
              defaultOptions: {
                queries: {
                  networkMode: "always",
                },
                mutations: {
                  networkMode: "always",
                },
              },
            },
          },
        }}

<Refine
        options={{
          disableTelemetry: true,
          reactQuery: {
            clientConfig: {
              defaultOptions: {
                queries: {
                  networkMode: "always",
                },
                mutations: {
                  networkMode: "always",
                },
              },
            },
          },
        }}

rare-sapphire•4w ago

Thank You!