chore: Redux setup, store setup and connection with backend

graphql/schema.graphql

@@ -5,7 +5,7 @@ scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date")
 scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime")
 
 type Query {
-    all_data: [CovidData!]!
+    allData: [CovidData!]! @all
     data(id: ID @eq): CovidData @find
     searchData(beginDate: Date!, endDate: Date) : [CovidData!]!
 }

package.json

@@ -28,9 +28,12 @@
         "@emotion/styled": "^11.6.0",
         "@mui/icons-material": "^5.2.5",
         "@mui/material": "^5.2.5",
+        "@reduxjs/toolkit": "^1.7.1",
+        "@rtk-query/graphql-request-base-query": "^1.0.3",
         "@types/react": "^17.0.37",
         "@types/react-dom": "^17.0.11",
         "@types/react-redux": "^7.1.20",
+        "graphql-request": "^3.7.0",
         "react-redux": "^7.2.6",
         "react-router-dom": "^6.2.1",
         "ts-loader": "^9.2.6",

resources/js/app.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from "./components/App";
 import { BrowserRouter } from "react-router-dom";
+import store from './store/store';
+import { Provider } from 'react-redux';
 
 /**
  * First we will load all of this project's JavaScript dependencies which
@@ -17,4 +19,4 @@ require('./bootstrap');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('app'));
+ReactDOM.render(<Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider>, document.getElementById('app'));

resources/js/hooks.ts

@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store/store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

resources/js/services/covidDataApi.ts

@@ -0,0 +1,92 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { gql } from "graphql-request";
+import { graphqlRequestBaseQuery } from "@rtk-query/graphql-request-base-query";
+
+export interface CovidData {
+    infected: number;
+    deceased: number;
+    recovered: number;
+    quarantined: number;
+    tested: number;
+    created_at: Date;
+}
+
+export interface GetAllDataResponse {
+    allData: CovidData[];
+}
+
+export interface GetDataByDateResponse {
+    searchData: CovidData[];
+}
+
+export interface GetDataResponse {
+    data: CovidData;
+}
+
+export const api = createApi({
+    baseQuery: graphqlRequestBaseQuery({
+        url: "/graphql",
+    }),
+    endpoints: (builder) => ({
+        getAllData: builder.query<CovidData[], {}>({
+            query: () => ({
+                document: gql`
+                    query GetAllData {
+                        allData {
+                            infected
+                            deceased
+                            recovered
+                            quarantined
+                            tested
+                            created_at
+                        }
+                    }
+                `,
+            }),
+            transformResponse: (response: GetAllDataResponse) =>
+                response.allData,
+        }),
+        getData: builder.query<CovidData, string>({
+            query: (id) => ({
+                document: gql`
+          query GetData($id: ID!) {
+            data(id: ${id}) {
+                infected
+                deceased
+                recovered
+                quarantined
+                tested
+                created_at
+            }
+          }
+          `,
+            }),
+            transformResponse: (response: GetDataResponse) => response.data,
+        }),
+        getDataByDate: builder.query<
+            CovidData[],
+            { beginDate: Date; endDate?: Date }
+        >({
+            query: ({ beginDate, endDate }) => ({
+                document: gql`
+                    query GetDataByDate($beginDate: Date!, $endDate: Date) {
+                        searchData(beginDate: $beginDate, endDate: $endDate) {
+                            infected
+                            deceased
+                            recovered
+                            quarantined
+                            tested
+                            created_at
+                        }
+                    }
+                `,
+                variables: { beginDate, endDate },
+            }),
+            transformResponse: (response: GetDataByDateResponse) =>
+                response.searchData,
+        }),
+    }),
+});
+
+export const { useGetAllDataQuery, useGetDataQuery, useGetDataByDateQuery } =
+    api;

resources/js/store/store.ts

@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { api } from '../services/covidDataApi';
+
+const store = configureStore({
+  reducer: {
+      [api.reducerPath]: api.reducer
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(api.middleware),
+});
+
+export default store;
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;