poc apollo rest link flexjar

package.json

@@ -37,8 +37,8 @@
         "@navikt/ds-icons": "^3.4.3",
         "@navikt/ds-react": "^6.8.0",
         "@navikt/oasis": "^3.3.0",
-        "@tanstack/react-query": "^5.40.0",
         "@types/uuid": "^9.0.8",
+        "apollo-link-rest": "^0.9.0",
         "classnames": "^2.5.1",
         "dayjs": "^1.11.11",
         "framer-motion": "^11.2.10",

src/app/api/flexjar/oppdater/[id]/route.ts

@@ -1,7 +1,17 @@
 import { postOppdater } from '@/app/api/flexjar/flexjar';
+import { erLokal } from '@/env';
+import logger from '@/logger';
+
+export const dynamic = 'force-dynamic';
 
-export const dynamic = 'force-dynamic'; // defaults to auto
 export async function POST(request: Request, { params }: { params: { id: string } }) {
-    const id = params.id; // 'a', 'b', or 'c'
-    return postOppdater(id, request);
+    if (erLokal) {
+        logger.info(`Mocker flexjar lokalt, mottok OPPDATERT feedback: ${JSON.stringify(request.json(), null, 2)}`);
+
+        return Response.json({
+            id: 'fake-lokal-flexjar-id',
+        });
+    }
+
+    return postOppdater(params.id, request);
 }

src/app/api/flexjar/route.ts

@@ -1,7 +1,16 @@
 import { postOpprett } from '@/app/api/flexjar/flexjar';
+import { erLokal } from '@/env';
+import logger from '@/logger';
 
 export const dynamic = 'force-dynamic';
 
 export async function POST(request: Request) {
+    if (erLokal) {
+        logger.info(`Mocker flexjar lokalt, mottok feedback: ${JSON.stringify(request.json(), null, 2)}`);
+        return Response.json({
+            id: 'fake-lokal-flexjar-id',
+        });
+    }
+
     return postOpprett(request);
 }

src/app/apollo/apolloClient.ts

@@ -1,3 +1,5 @@
+import { RestLink } from 'apollo-link-rest';
+
 import possibletypes from '@/app/apollo/possibletypes';
 import { erLokal } from '@/env';
 import { ApolloClient, HttpLink, InMemoryCache, TypePolicies, from } from '@apollo/client';
@@ -47,9 +49,17 @@ const getTypePolicies = (): TypePolicies => {
     };
 };
 
+const restLink = new RestLink({
+    endpoints: {
+        sanity: 'https://z9kr8ddn.api.sanity.io/v2023-08-01/data/query/production',
+        flexjar: '/api/flexjar',
+    },
+});
+
 export const createApolloClient = () =>
     new ApolloClient({
         link: from([
+            restLink,
             new RetryLink({
                 attempts: { max: 5 },
             }),

src/app/providers.tsx

@@ -24,7 +24,6 @@ import { ApolloProvider } from '@apollo/client';
 import { useLoadingToast } from '@hooks/useLoadingToast';
 import { useFetchPersonQuery } from '@state/person';
 import { useSetVarsler } from '@state/varsler';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 dayjs.extend(relativeTime);
 dayjs.extend(minMax);
@@ -42,7 +41,6 @@ type Props = {
 
 export const Providers = ({ children, bruker }: PropsWithChildren<Props>): ReactElement => {
     const [apolloClient] = useState(() => createApolloClient());
-    const [queryClient] = useState(() => new QueryClient());
 
     const initializeState = useCallback(
         ({ set }: { set: SetRecoilState }) => {
@@ -52,7 +50,7 @@ export const Providers = ({ children, bruker }: PropsWithChildren<Props>): React
             hydrateAllFilters(set, bruker.grupper);
             hydrateSorteringForTab(set);
         },
-        [bruker.grupper],
+        [bruker.grupper, bruker.ident],
     );
 
     useLayoutEffect(() => {
@@ -65,9 +63,7 @@ export const Providers = ({ children, bruker }: PropsWithChildren<Props>): React
             <RecoilRoot initializeState={initializeState}>
                 <SyncAlerts>
                     <VenterPåEndringProvider>
-                        <BrukerContext.Provider value={bruker}>
-                            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-                        </BrukerContext.Provider>
+                        <BrukerContext.Provider value={bruker}>{children}</BrukerContext.Provider>
                     </VenterPåEndringProvider>
                 </SyncAlerts>
             </RecoilRoot>

src/components/flexjar/FlexjarFelles.tsx

@@ -4,9 +4,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { BodyShort, Button, Textarea } from '@navikt/ds-react';
 
+import { FeedbackPayload } from '@/external/flexjar/types';
+import { useOppdaterFlexjarFeedback } from '@/external/flexjar/useOppdaterFlexjarFeedback';
+import { useOpprettFlexjarFeedback } from '@/external/flexjar/useOpprettFlexjarFeedback';
 import { Bold } from '@components/Bold';
-import { useOppdaterFlexjarFeedback } from '@hooks/useOppdaterFlexjarFeedback';
-import { useOpprettFlexjarFeedback } from '@hooks/useOpprettFlexjarFeedback';
 
 interface FlexjarFellesProps {
     feedbackId: string;
@@ -38,26 +39,37 @@ export function FlexjarFelles({
     const [textValue, setTextValue] = useState('');
     const [errorMsg, setErrorMsg] = useState<string | null>(null);
     const textAreaRef = useRef(null);
-    const { mutate: giFeedback, data, reset } = useOpprettFlexjarFeedback();
-    const { mutate: oppdaterFeedback } = useOppdaterFlexjarFeedback();
+    const { mutate: giFeedback, data, error: opprettError, reset } = useOpprettFlexjarFeedback();
+    const { mutate: oppdaterFeedback, error: oppdaterError } = useOppdaterFlexjarFeedback();
 
     const fetchFeedback = useCallback(
         async (knappeklikk?: () => void): Promise<boolean> => {
             if (activeState === null) {
                 return false;
             }
 
-            const body = {
+            const payload: FeedbackPayload = {
                 feedback: textValue,
                 feedbackId: feedbackId,
                 svar: activeState,
                 ...feedbackProps,
             };
+
             if (data?.id) {
-                oppdaterFeedback({ body, id: data.id, cb: knappeklikk });
+                oppdaterFeedback({
+                    variables: {
+                        id: data.id,
+                        payload,
+                    },
+                    onCompleted: knappeklikk,
+                });
                 return true;
             } else {
-                giFeedback(body);
+                giFeedback({
+                    variables: {
+                        payload,
+                    },
+                });
                 return false;
             }
         },
@@ -112,7 +124,13 @@ export function FlexjarFelles({
                         <form className={styles.form}>
                             <Textarea
                                 ref={textAreaRef}
-                                error={errorMsg}
+                                error={
+                                    errorMsg
+                                        ? errorMsg
+                                        : opprettError || oppdaterError
+                                          ? 'En ukjent feil oppstod, prøv igjen senere'
+                                          : undefined
+                                }
                                 label={getPlaceholder()}
                                 onKeyDown={async (e) => {
                                     if (e.key === 'Enter' && e.ctrlKey) {

src/external/flexjar/types.ts

@@ -0,0 +1,5 @@
+export type FeedbackPayload = Record<string, unknown> & {
+    feedback: string;
+    svar: string | number;
+    feedbackId: string;
+};

src/external/flexjar/useOppdaterFlexjarFeedback.ts

@@ -0,0 +1,27 @@
+import { FeedbackPayload } from '@/external/flexjar/types';
+import { gql, useMutation } from '@apollo/client';
+
+type OppdaterFeedbackVariables = { id: string; payload: FeedbackPayload };
+
+export function useOppdaterFlexjarFeedback() {
+    const [mutate, { data, error }] = useMutation<unknown, OppdaterFeedbackVariables>(gql`
+        mutation OppdaterFlexjarFeedback($id: String!, $payload: JSON!) {
+            oppdaterFlexjarFeedback(id: $id, input: $payload)
+                @rest(
+                    type: "FlexjarFeedback"
+                    endpoint: "flexjar"
+                    path: "/oppdater/{args.id}"
+                    method: "POST"
+                    bodyKey: "input"
+                ) {
+                id
+            }
+        }
+    `);
+
+    return {
+        mutate,
+        data,
+        error,
+    };
+}