Change scoreboard to query instead of subscription.

client/src/components/scoreboard-display/scoreboard-display.component.jsx

@@ -8,8 +8,11 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import moment from "moment";
-import { useApolloClient } from "@apollo/client";
-import { GET_BLOCKED_DAYS } from "../../graphql/scoreboard.queries";
+import { useApolloClient, useQuery } from "@apollo/client";
+import {
+  GET_BLOCKED_DAYS,
+  QUERY_SCOREBOARD,
+} from "../../graphql/scoreboard.queries";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -22,10 +25,15 @@ export default connect(
   mapDispatchToProps
 )(ScoreboardDisplayComponent);
 
-export function ScoreboardDisplayComponent({
-  bodyshop,
-  scoreboardSubscription,
-}) {
+export function ScoreboardDisplayComponent({ bodyshop }) {
+  const scoreboardSubscription = useQuery(QUERY_SCOREBOARD, {
+    variables: {
+      start: moment().startOf("month"),
+      end: moment().endOf("month"),
+    },
+    pollInterval: 60000,
+  });
+
   const { data } = scoreboardSubscription;
   const client = useApolloClient();
   const scoreBoardlist = (data && data.scoreboard) || [];

client/src/graphql/scoreboard.queries.js

@@ -1,7 +1,7 @@
 import { gql } from "@apollo/client";
 
-export const SUBSCRIPTION_SCOREBOARD = gql`
-  subscription SUBSCRIPTION_SCOREBOARD($start: date!, $end: date!) {
+export const QUERY_SCOREBOARD = gql`
+  query QUERY_SCOREBOARD($start: date!, $end: date!) {
     scoreboard(
       where: { _and: { date: { _gte: $start, _lte: $end } } }
       order_by: { date: asc }

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -2,17 +2,14 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
 import {
   setBreadcrumbs,
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
-import { useSubscription } from "@apollo/client";
-import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries";
-import moment from "moment";
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
-import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -26,13 +23,6 @@ const mapDispatchToProps = (dispatch) => ({
 export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
 
-  const scoreboardSubscription = useSubscription(SUBSCRIPTION_SCOREBOARD, {
-    variables: {
-      start: moment().startOf("month"),
-      end: moment().endOf("month"),
-    },
-  });
-
   useEffect(() => {
     document.title = t("titles.scoreboard");
     setSelectedHeader("scoreboard");
@@ -47,7 +37,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapper featureName="scoreboard">
       <RbacWrapper action="scoreboard:view">
-        <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
+        <ScoreboardDisplay />
       </RbacWrapper>
     </FeatureWrapper>
   );