Merge pull request #66 from HSLdevcom/update-graphiql

DT-6903 - Update GraphiQL to version 4.1.0

Author: optionsome

.eslintrc.js

@@ -71,5 +71,8 @@ module.exports = {
   plugins: ['react', 'compat', 'prettier', 'jsx-a11y'],
   settings: {
     polyfills: ['fetch', 'promises'],
+    'import/resolver': {
+      typescript: {},
+    },
   },
 };

package.json

@@ -8,11 +8,11 @@
   "packageManager": "yarn@4.5.1",
   "private": true,
   "dependencies": {
-    "graphiql": "^3.7.1",
-    "graphql": "^16.9.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0"
+    "graphiql": "^4.1.0",
+    "graphql": "^16.11.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.1"
   },
   "scripts": {
     "start": "vite",
@@ -50,13 +50,14 @@
     "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "^4.4.1",
     "eslint-plugin-compat": "^6.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "graphql-ws": "^5.16.0",
+    "graphql-ws": "^6.0.5",
     "jsdom": "^25.0.1",
     "prettier": "^3.3.3",
     "vite": "^5.4.11",

src/config.js

@@ -81,13 +81,6 @@ export const CONFIGS = [
   {
     router: 'hsl',
     api: {
-      [API_VERSION_1]: {
-        title: 'HSL (v1 Deprecated)',
-        routerUrl: {
-          [API_TYPE.DEV]: buildUrl(API_TYPE.DEV, API_VERSION_1, 'hsl'),
-          [API_TYPE.PROD]: buildUrl(API_TYPE.PROD, API_VERSION_1, 'hsl'),
-        },
-      },
       [API_VERSION_2]: {
         title: 'HSL (v2)',
         dialect: {
@@ -120,13 +113,6 @@ export const CONFIGS = [
   {
     router: 'waltti',
     api: {
-      [API_VERSION_1]: {
-        title: 'Waltti (v1 Deprecated)',
-        routerUrl: {
-          [API_TYPE.DEV]: buildUrl(API_TYPE.DEV, API_VERSION_1, 'waltti'),
-          [API_TYPE.PROD]: buildUrl(API_TYPE.PROD, API_VERSION_1, 'waltti'),
-        },
-      },
       [API_VERSION_2]: {
         title: 'Waltti (v2)',
         dialect: {
@@ -159,13 +145,6 @@ export const CONFIGS = [
   {
     router: 'finland',
     api: {
-      [API_VERSION_1]: {
-        title: 'Finland (v1 Deprecated)',
-        routerUrl: {
-          [API_TYPE.DEV]: buildUrl(API_TYPE.DEV, API_VERSION_1, 'finland'),
-          [API_TYPE.PROD]: buildUrl(API_TYPE.PROD, API_VERSION_1, 'finland'),
-        },
-      },
       [API_VERSION_2]: {
         title: 'Finland (v2)',
         dialect: {

src/graphiql/CustomGraphiQL.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import GraphiQL from 'graphiql';
+import { GraphiQL } from 'graphiql';
 import { ToolbarMenu } from '@graphiql/react';
 import graphQLFetcher from '../api/graphQLFetcher';
 import 'graphiql/graphiql.css';
@@ -31,10 +31,13 @@ const GraphiQLWithCustomToolbar = ({
     operationName={operationName || undefined}
     onEditQuery={query => setQuery(query)}
     onEditVariables={variables => setVariables(variables)}
-    onEditOperationName={operationName => setOperationName(operationName)}
-    toolbar={{
-      additionalContent: (
+    onEditOperationName={operationName => setOperationName(operationName)}>
+    <GraphiQL.Toolbar>
+      {({ merge, prettify, copy }) => (
         <>
+          {prettify}
+          {merge}
+          {copy}
           <ToolbarMenu
             button={<div className="customgraphiql-toolbarmenu-button">EP</div>}
             label={`Endpoint: ${config.title}`}>
@@ -88,9 +91,13 @@ const GraphiQLWithCustomToolbar = ({
             )}
           </ToolbarMenu>
         </>
-      ),
-    }}
-  />
+      )}
+    </GraphiQL.Toolbar>
+    <GraphiQL.Footer>
+      <b>API:</b> {apiType ? API_CONFIG[apiType].label : ''} - <b>Endpoint:</b>{' '}
+      {config.title}
+    </GraphiQL.Footer>
+  </GraphiQL>
 );
 
 const QUERY_STRING_PARAMS = ['query', 'variables', 'operationName'];