Feat/front metadata request (#1977)

* wip

* Wip

* Wip

* Finished v1

* Fix from PR

* Removed unused fragment masking feature

front/src/modules/metadata/components/ApolloClientMetadataProvider.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable no-console */
+import { useMemo } from 'react';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { useRecoilState } from 'recoil';
+
+import { tokenPairState } from '@/auth/states/tokenPairState';
+
+import { ApolloClientMetadataContext } from '../context/ApolloClientMetadataContext';
+
+export const ApolloClientMetadataProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [tokenPair] = useRecoilState(tokenPairState);
+
+  const apolloClientMetadata = useMemo(() => {
+    if (tokenPair?.accessToken.token) {
+      return new ApolloClient({
+        uri: `${process.env.REACT_APP_SERVER_BASE_URL}/metadata`,
+        cache: new InMemoryCache(),
+        headers: {
+          Authorization: `Bearer ${tokenPair.accessToken.token}`,
+        },
+      });
+    } else {
+      return null;
+    }
+  }, [tokenPair]);
+
+  return (
+    <ApolloClientMetadataContext.Provider value={apolloClientMetadata}>
+      {children}
+    </ApolloClientMetadataContext.Provider>
+  );
+};

front/src/modules/metadata/components/FetchMetadataEffect.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { ObjectsQuery } from '~/generated-metadata/graphql';
+
+import { GET_ALL_OBJECTS } from '../graphql/queries';
+import { useApolloClientMetadata } from '../hooks/useApolloClientMetadata';
+import { metadataObjectsState } from '../states/metadataObjectsState';
+import { MetadataObject } from '../types/MetadataObject';
+
+export const FetchMetadataEffect = () => {
+  const [metadataObjects, setMetadataObjects] =
+    useRecoilState(metadataObjectsState);
+
+  const apolloClientMetadata = useApolloClientMetadata();
+
+  useEffect(() => {
+    (async () => {
+      if (apolloClientMetadata && metadataObjects.length === 0) {
+        const objects = await apolloClientMetadata.query<ObjectsQuery>({
+          query: GET_ALL_OBJECTS,
+        });
+
+        if (objects.data.objects.edges.length > 0) {
+          const formattedObjects: MetadataObject[] =
+            objects.data.objects.edges.map((object) => ({
+              ...object.node,
+              fields: object.node.fields.edges.map((field) => field.node),
+            }));
+          setMetadataObjects(formattedObjects);
+        }
+      }
+    })();
+  }, [metadataObjects, setMetadataObjects, apolloClientMetadata]);
+
+  return <></>;
+};

front/src/modules/metadata/context/ApolloClientMetadataContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
+
+export const ApolloClientMetadataContext =
+  createContext<ApolloClient<NormalizedCacheObject> | null>(null);

front/src/modules/metadata/graphql/queries.ts

@@ -0,0 +1,58 @@
+import { gql } from '@apollo/client';
+
+export const GET_ALL_OBJECTS = gql`
+  query Objects {
+    objects(paging: { first: 100 }) {
+      edges {
+        node {
+          id
+          dataSourceId
+          nameSingular
+          namePlural
+          labelSingular
+          labelPlural
+          description
+          icon
+          isCustom
+          isActive
+          createdAt
+          updatedAt
+          fields(paging: { first: 100 }) {
+            edges {
+              node {
+                id
+                type
+                nameSingular
+                namePlural
+                labelSingular
+                labelPlural
+                description
+                icon
+                placeholder
+                isCustom
+                isActive
+                isNullable
+                createdAt
+                updatedAt
+              }
+            }
+            pageInfo {
+              hasNextPage
+              hasPreviousPage
+              startCursor
+              endCursor
+            }
+            totalCount
+          }
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      totalCount
+    }
+  }
+`;

front/src/modules/metadata/hooks/useApolloClientMetadata.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { ApolloClientMetadataContext } from '../context/ApolloClientMetadataContext';
+
+export const useApolloClientMetadata = () => {
+  return useContext(ApolloClientMetadataContext);
+};

front/src/modules/metadata/states/metadataObjectsState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { MetadataObject } from '../types/MetadataObject';
+
+export const metadataObjectsState = atom<MetadataObject[]>({
+  key: 'metadataObjectsState',
+  default: [],
+});

front/src/modules/metadata/types/MetadataObject.ts

@@ -0,0 +1,5 @@
+import { Field, Object as GeneratedObject } from '~/generated-metadata/graphql';
+
+export type MetadataObject = Omit<GeneratedObject, 'fields'> & {
+  fields: Field[];
+};