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([]);

client/yarn.lock

@@ -1120,14 +1120,14 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
   version "7.13.17"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
   integrity sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
   integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
@@ -3451,9 +3451,9 @@ backo2@~1.0.2:
   integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
 
 balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 base64-arraybuffer@0.1.4:
   version "0.1.4"
@@ -10055,9 +10055,9 @@ react-qr-code@^1.1.1:
     qr.js "0.0.0"
 
 react-query@^3.13.5:
-  version "3.13.5"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.13.5.tgz#b59e2094014dae0461ed7aab68ae030be41eda8a"
-  integrity sha512-rL0NO2gVfaeMaVD0Z0yrxZT1oMGejGxGD5t+5d8eC9kpID6oa3r2bFBR3nJeuPhwdGvZtifbB1KJkKdPYaYqVg==
+  version "3.13.12"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.13.12.tgz#d8e432099445fed5b03406838291d42286236263"
+  integrity sha512-RZYvepBdDG4Xgz64vUHjIkUqXX6giw3xJsgdRjWx+vLkOB1vbIQE8F82CNlVbYW3JjZobl4YzmOuLx0wMhLX4Q==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"