improvements in react-query

- fetch to useFetch hook
- refetch every 10s
- sync browser tabs with experimental broadcastQueryClient

client/src/App.jsx

@@ -4,6 +4,7 @@ import Editor from './features/editors/Editor';
 import DefaultPresenter from './features/viewers/DefaultPresenter';
 import PresenterView from './features/viewers/presenter/PresenterView';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { broadcastQueryClient } from 'react-query/broadcastQueryClient-experimental';
 import SocketProvider from './app/context/socketContext';
 import PresenterSimple from './features/viewers/presenter/PresenterSimple';
 import StageManager from './features/viewers/backstage/StageManager';
@@ -11,6 +12,10 @@ import withSocket from './features/viewers/ViewWrapper';
 import Lower from './features/viewers/lower/Lower';
 
 const queryClient = new QueryClient();
+broadcastQueryClient({
+  queryClient,
+  broadcastChannel: 'ontime',
+});
 
 const SDefault = withSocket(DefaultPresenter);
 const SSpeaker = withSocket(PresenterView);

client/src/app/hooks/useFetch.js

@@ -0,0 +1,10 @@
+import { useQuery } from 'react-query';
+const refetchIntervalMs = 10000;
+
+export const useFetch = (namespace, fn) => {
+  const { data, status, isError, refetch } = useQuery(namespace, fn, {
+    refetchInterval: refetchIntervalMs,
+  });
+
+  return { data, status, isError, refetch };
+};

client/src/features/editors/list/EventListWrapper.jsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { useEffect } from 'react';
 import {
   eventsNamespace,
@@ -13,10 +13,11 @@ import EventListMenu from '../../menu/EventListMenu.jsx';
 import { showErrorToast } from '../../../common/helpers/toastManager';
 import { Skeleton } from '@chakra-ui/skeleton';
 import style from './List.module.css';
+import { useFetch } from '../../../app/hooks/useFetch.js';
 
 export default function EventListWrapper() {
   const queryClient = useQueryClient();
-  const { data, status, isError, refetch } = useQuery(
+  const { data, status, isError, refetch } = useFetch(
     eventsNamespace,
     fetchAllEvents
   );

client/src/features/modals/SettingsModal.jsx

@@ -19,11 +19,11 @@ import {
   postEvent,
   eventNamespace,
 } from '../../app/api/eventApi';
-import { useQuery } from 'react-query';
 import { useEffect, useState } from 'react';
+import { useFetch } from '../../app/hooks/useFetch';
 
 export default function SettingsModal(props) {
-  const { data, status, isError } = useQuery(eventNamespace, fetchEvent);
+  const { data, status, isError } = useFetch(eventNamespace, fetchEvent);
   const [formData, setFormData] = useState({
     title: '',
     url: '',

client/src/features/viewers/ViewWrapper.jsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 import { eventsNamespace, fetchAllEvents } from '../../app/api/eventsApi';
 import { fetchEvent, eventNamespace } from '../../app/api/eventApi';
 import { useSocket } from '../../app/context/socketContext';
 import { stringFromMillis } from '../../common/dateConfig';
+import { useFetch } from '../../app/hooks/useFetch';
+
 
 const withSocket = (Component) => {
   const WrappedComponent = (props) => {
@@ -11,12 +12,12 @@ const withSocket = (Component) => {
       data: eventsData,
       status: eventsDataStatus,
       isError: eventsDataIsError,
-    } = useQuery(eventsNamespace, fetchAllEvents);
+    } = useFetch(eventsNamespace, fetchAllEvents);
     const {
       data: genData,
       status: genDataStatus,
       isError: genDataIsError,
-    } = useQuery(eventNamespace, fetchEvent);
+    } = useFetch(eventNamespace, fetchEvent);
 
     const [publicEvents, setPublicEvents] = useState([]);
     const [backstageEvents, setBackstageEvents] = useState([]);