rtk query show when internet is off?

Question

I use rtk query.

if I close my internet connection and navigate to a screen I see no Loader and or something else I see nothing. So when I turn on my internet connection then nothing happens. How can I say to the user when the internet is offline that I send him a message and when Internet is on that the rtk query automatically refetch the data ?

Cart.tsx

const ShoppingCart: React.FC<Props> = ({}) => {
  const user_id = useSelector((state: RootState) => state.Auth.user.user_id);

  const { data, isFetching, isLoading } = useCartQuery({user_id});

  if(isLoading) {
    return (
      <Loader />
    )
  } else if(data && data.length > 0) {
    return (
      <ShoppingCartComponent
        products={data}
      />
    )
  } else if(data && data.length === 0) {
    return (
      <ShoppingCartEmpty />
    )
  }
}

export default ShoppingCart;

Cart.ts API

  reducerPath: 'ShoppingCartApi',
  baseQuery: fetchBaseQuery({ baseUrl: `${API_ENDPOINT}/` }),
  tagTypes: ['CART'],
  endpoints: (builder) => ({
    cart: builder.query<IProduct[], { user_id?: number; unlogged_uuid?: string; }>({
      query: (data) => ({
        url: '/cart',
        method: 'POST',
        body: data
      }),
      providesTags: ['CART']
    }),

use the navigator.onLine property in JavaScript. This property returns true if the user's device is connected to the internet, and false if it is not. also use window.addEventListener to listen for the online event, which is triggered when the user's device connects to the internet after being offline. You can use this event to refetch the data from the API and update the component. — Milan Rilex Ristic, Dec 14 '22 at 02:24
[this](https://stackoverflow.com/questions/189430/detect-the-internet-connection-is-offline) is the answer for checking the internet connection. — Amir Rezvani, Dec 15 '22 at 10:57

score 1 · Accepted Answer · answered Dec 16 '22 at 08:56

You can use the navigator.onLine to check if the user's device is currently online. Then listen for the online event, which is fired when the device's internet connection is restored and refetch data.

const ShoppingCart: React.FC<Props> = ({}) => {
  const user_id = useSelector((state: RootState) => state.Auth.user.user_id);
  const { data, isFetching, isLoading, refetch } = useCartQuery({user_id});

  useEffect(() => {
    const handleOnlineEvent = () => {
      // Refetch data from the API when the online event is fired
      refetch();
    };

    window.addEventListener('online', handleOnlineEvent);

    return () => {
      window.removeEventListener('online', handleOnlineEvent);
    };
  }, []);

  if (!navigator.onLine) {
    return (
      <div>
        <p>You are currently offline. Please check your internet connection and try again.</p>
      </div>
    );
  }

  if (isLoading) {
    return (
      <Loader />
    )
  } else if(data && data.length > 0) {
    return (
      <ShoppingCartComponent
        products={data}
      />
    )
  } else if(data && data.length === 0) {
    return (
      <ShoppingCartEmpty />
    )
  }
}

rtk query show when internet is off?

1 Answers1