From f3e7b135c632ec395c75217ef68dceca71692c63 Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Mon, 20 Jan 2025 16:23:17 +0700 Subject: [PATCH] remove apollo Signed-off-by: Huong Nguyen --- cypress/support/commands.js | 26 ---------- src/apollo/config.js | 77 ----------------------------- src/apollo/queries.js | 12 ----- src/apollo/schema.graphql | 11 ----- src/apollo/utils.js | 20 -------- src/components/provider/provider.js | 11 ----- src/components/wrapper/wrapper.js | 22 +++------ 7 files changed, 6 insertions(+), 173 deletions(-) delete mode 100644 src/apollo/config.js delete mode 100644 src/apollo/queries.js delete mode 100644 src/apollo/schema.graphql delete mode 100644 src/apollo/utils.js delete mode 100644 src/components/provider/provider.js diff --git a/cypress/support/commands.js b/cypress/support/commands.js index d57261b556..de8f12d13f 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -1,32 +1,6 @@ // Add any reusable custom commands here import { join } from 'path'; -/** - * Custom command for intercepting network requests using fixtures for GraphQL - * @param {String} operationName - * @returns {Object} The mock/fixtured json response - */ -Cypress.Commands.add('__interceptGql__', (operationName, mutationFor) => { - // Assign an alias to the intercept based on the graphql request (mutation or query). - const interceptAlias = mutationFor ? mutationFor : operationName; - - cy.intercept('POST', '/graphql', (req) => { - const requestBody = req.body; - - // check for the operation name match in the graphql request body - if (requestBody?.operationName === operationName) { - // Assign a fixture path based on the graphql request (mutation or query). - const fixturePath = mutationFor - ? `graphql/${mutationFor}.json` - : `graphql/${operationName}.json`; - - // Stub the server response (request will never reach the origin server, instead the response is - // served from the fixture) - req.reply({ fixture: fixturePath }); - } - }).as(interceptAlias); -}); - /** * Custom command for intercepting network requests for REST * @param {String} url diff --git a/src/apollo/config.js b/src/apollo/config.js deleted file mode 100644 index 9d95d36c4e..0000000000 --- a/src/apollo/config.js +++ /dev/null @@ -1,77 +0,0 @@ -import fetch from 'cross-fetch'; -import { - ApolloClient, - InMemoryCache, - HttpLink, - ApolloLink, - Observable, -} from '@apollo/client'; -import { onError } from '@apollo/client/link/error'; -import loadJsonData from '../store/load-data'; - -const apiBaseUrl = `/graphql`; - -// HTTP link for GraphQL API calls -const httpLink = new HttpLink({ - uri: apiBaseUrl, - fetch, -}); - -// Error handling link -const errorLink = onError( - ({ graphQLErrors, networkError, operation, forward, response }) => { - if (networkError) { - console.error(`[Network error]: ${networkError}`); - - // Try reading from static file if network error occurs - return new Observable((observer) => { - (async () => { - const { operationName, variables } = operation; - let staticFilePath = `${apiBaseUrl}/${operationName}.json`; - - if (variables?.runIds) { - staticFilePath = `${apiBaseUrl}/${operationName}/${variables.runIds}.json`; - } - - try { - const staticData = await loadJsonData(staticFilePath, null); - if (staticData) { - observer.next({ data: staticData }); - observer.complete(); - } else { - observer.error(networkError); - } - } catch (error) { - observer.error(networkError); - } - })(); - }); - } - - if (graphQLErrors) { - graphQLErrors.forEach(({ message, locations, path }) => - console.error( - `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` - ) - ); - } - } -); - -// Combine the links -const link = ApolloLink.from([errorLink, httpLink]); - -// Create the Apollo Client -export const client = new ApolloClient({ - connectToDevTools: true, - link, - cache: new InMemoryCache(), - defaultOptions: { - query: { - errorPolicy: 'all', - }, - mutate: { - errorPolicy: 'all', - }, - }, -}); diff --git a/src/apollo/queries.js b/src/apollo/queries.js deleted file mode 100644 index 138d8a3a49..0000000000 --- a/src/apollo/queries.js +++ /dev/null @@ -1,12 +0,0 @@ -import gql from 'graphql-tag'; - -/** query for obtaining installed and latest Kedro-Viz versions */ -export const GET_VERSIONS = gql` - query getVersion { - version { - installed - isOutdated - latest - } - } -`; diff --git a/src/apollo/schema.graphql b/src/apollo/schema.graphql deleted file mode 100644 index 3aa405737e..0000000000 --- a/src/apollo/schema.graphql +++ /dev/null @@ -1,11 +0,0 @@ -type Query { - """Get the installed and latest Kedro-Viz versions""" - version: Version! -} - -"""Installed and latest Kedro-Viz versions""" -type Version { - installed: String! - isOutdated: Boolean! - latest: String! -} diff --git a/src/apollo/utils.js b/src/apollo/utils.js deleted file mode 100644 index 5236db08bc..0000000000 --- a/src/apollo/utils.js +++ /dev/null @@ -1,20 +0,0 @@ -import { useEffect, useState } from 'react'; -import { useQuery } from '@apollo/client'; - -/** - * @param {Apollo query Object} query - * @param {Apollo query options Object} options - * @returns The data from the query, including error and loading states - */ -export const useApolloQuery = (query, options) => { - const [data, setData] = useState(undefined); - const { data: queryData, error, loading } = useQuery(query, options); - - useEffect(() => { - if (queryData !== undefined) { - setData(queryData); - } - }, [queryData]); - - return { data, error, loading }; -}; diff --git a/src/components/provider/provider.js b/src/components/provider/provider.js deleted file mode 100644 index b4de899803..0000000000 --- a/src/components/provider/provider.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { ApolloProvider } from '@apollo/client'; -import { client } from '../../apollo/config'; - -export const GraphQLProvider = ({ children }) => { - return ( - - <>{children} - - ); -}; diff --git a/src/components/wrapper/wrapper.js b/src/components/wrapper/wrapper.js index e04c5af2b3..d7eb64fa39 100644 --- a/src/components/wrapper/wrapper.js +++ b/src/components/wrapper/wrapper.js @@ -3,12 +3,7 @@ import { connect } from 'react-redux'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import classnames from 'classnames'; import { isRunningLocally } from '../../utils'; -import { useApolloQuery } from '../../apollo/utils'; -import { client } from '../../apollo/config'; -import { GraphQLProvider } from '../provider/provider'; -import { GET_VERSIONS } from '../../apollo/queries'; import { getVersion } from '../../utils'; - import FeatureHints from '../feature-hints'; import GlobalToolbar from '../global-toolbar'; import FlowChartWrapper from '../flowchart-wrapper'; @@ -22,12 +17,9 @@ import './wrapper.scss'; * Main app container. Handles showing/hiding the sidebar nav, and theme classes. */ export const Wrapper = ({ displayGlobalNavigation, theme }) => { - const { data: versionData } = useApolloQuery(GET_VERSIONS, { - client, - skip: !displayGlobalNavigation || !isRunningLocally(), - }); const [isOutdated, setIsOutdated] = useState(false); const [latestVersion, setLatestVersion] = useState(null); + const [versions, setVersions] = useState(null); useEffect(() => { async function checkKedroVizVersion() { @@ -38,6 +30,7 @@ export const Wrapper = ({ displayGlobalNavigation, theme }) => { if (request.ok) { setIsOutdated(response.is_outdated); setLatestVersion(response.latest); + setVersions(response); } } catch (error) { console.error('Error fetching Kedro-Viz version:', error); @@ -57,18 +50,15 @@ export const Wrapper = ({ displayGlobalNavigation, theme }) => {

Kedro-Viz

{displayGlobalNavigation ? ( - + <> {isRunningLocally() ? : null} - {versionData && ( - + {versions && ( + )} @@ -76,7 +66,7 @@ export const Wrapper = ({ displayGlobalNavigation, theme }) => { - + ) : ( )}