From e5e5d2c65e583493870bc0b62fb185c5e757c13f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 16:27:49 +0200 Subject: ui: Migrate project APIs to React Query This change updates the OpenDC frontend to use React Query for fetching and mutating project data. Previously, this state was tracked and synchronized via Redux. Migrating to React Query greatly simplifies the state synchronization logic necessary in the frontend. --- opendc-web/opendc-web-ui/src/pages/_app.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/_app.js') diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js index c1adbd6e..7b4dcb3e 100644 --- a/opendc-web/opendc-web-ui/src/pages/_app.js +++ b/opendc-web/opendc-web-ui/src/pages/_app.js @@ -28,15 +28,20 @@ import '../index.scss' import { AuthProvider, useAuth } from '../auth' import * as Sentry from '@sentry/react' import { Integrations } from '@sentry/tracing' +import { QueryClient, QueryClientProvider } from 'react-query' +import { useMemo } from 'react' // This setup is necessary to forward the Auth0 context to the Redux context const Inner = ({ Component, pageProps }) => { const auth = useAuth() - const store = useStore(pageProps.initialReduxState, { auth }) + const queryClient = useMemo(() => new QueryClient(), []) + const store = useStore(pageProps.initialReduxState, { auth, queryClient }) return ( - - - + + + + + ) } -- cgit v1.2.3 From 02a2f0f89cb1f39a5f8856bca1971a4e1b12374f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 20:13:30 +0200 Subject: ui: Use React Query defaults to reduce duplication --- opendc-web/opendc-web-ui/src/pages/_app.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'opendc-web/opendc-web-ui/src/pages/_app.js') diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js index 7b4dcb3e..6a7200d5 100644 --- a/opendc-web/opendc-web-ui/src/pages/_app.js +++ b/opendc-web/opendc-web-ui/src/pages/_app.js @@ -30,11 +30,21 @@ import * as Sentry from '@sentry/react' import { Integrations } from '@sentry/tracing' import { QueryClient, QueryClientProvider } from 'react-query' import { useMemo } from 'react' +import { configureProjectClient } from '../data/project' +import { configureExperimentClient } from '../data/experiments' +import { configureTopologyClient } from '../data/topology' // This setup is necessary to forward the Auth0 context to the Redux context const Inner = ({ Component, pageProps }) => { const auth = useAuth() - const queryClient = useMemo(() => new QueryClient(), []) + + const queryClient = useMemo(() => { + const client = new QueryClient() + configureProjectClient(client, auth) + configureExperimentClient(client, auth) + configureTopologyClient(client, auth) + return client + }, []) // eslint-disable-line react-hooks/exhaustive-deps const store = useStore(pageProps.initialReduxState, { auth, queryClient }) return ( -- cgit v1.2.3