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 <></>;
+};