Add more graphql support to Link

apps/link/pages/_app.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { useState } from "react";
 import { AppProps } from "next/app";
 import { SessionProvider } from "next-auth/react";
 import { CssBaseline } from "@mui/material";
@@ -13,6 +14,8 @@ import "@fontsource/roboto/700.css";
 import "@fontsource/playfair-display/900.css";
 import "styles/global.css";
 import { LicenseInfo } from "@mui/x-data-grid-pro";
+import { SWRConfig } from "swr";
+import { GraphQLClient } from "graphql-request";
 
 LicenseInfo.setLicenseKey(
   "fd009c623acc055adb16370731be92e4T1JERVI6NDA3NTQsRVhQSVJZPTE2ODAyNTAwMTUwMDAsS0VZVkVSU0lPTj0x"
@@ -27,14 +30,40 @@ interface LinkWebProps extends AppProps {
 
 const LinkWeb = (props: LinkWebProps) => {
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  const [csrfToken, setCsrfToken] = useState("");
+  const origin = typeof window !== 'undefined' && window.location.origin
+    ? window.location.origin : null;
+  const client = new GraphQLClient(`${origin}/graphql`, {
+    headers: {
+      "Content-Type": "application/json",
+      "Accept": "application/json",
+    },
+  });
+  const graphQLFetcher = async ({ document, variables }: any) => {
+    const requestHeaders = {
+      "X-CSRF-Token": csrfToken,
+    };
+    const { data, headers } = await client.rawRequest(
+      document,
+      variables,
+      requestHeaders
+    );
+
+    const token = headers.get('CSRF-Token');
+    setCsrfToken(token);
+
+    return data;
+  };
 
   return (
     <SessionProvider session={(pageProps as any).session}>
       <CacheProvider value={emotionCache}>
-        <CssBaseline />
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <Component {...pageProps} />
-        </LocalizationProvider>
+        <SWRConfig value={{ fetcher: graphQLFetcher }}>
+          <CssBaseline />
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <Component {...pageProps} />
+          </LocalizationProvider>
+        </SWRConfig>
       </CacheProvider>
     </SessionProvider>
   );

apps/link/pages/api/proxy/[[...path]].ts

@@ -13,19 +13,11 @@ const withAuthInfo =
       return res.redirect("/login");
     }
 
-    try {
-      const res2 = await fetch(`http://127.0.0.1:8001`);
-      console.log({ res2 })
-    } catch (e) {
-      console.log({ e })
+    if (req.headers) {
+      req.headers['X-Forwarded-User'] = session.email.toLowerCase();
+      req.headers['host'] = 'zammad.example.com';
     }
 
-    console.log({ zammad: process.env.ZAMMAD_URL })
-    req.headers['X-Forwarded-User'] = session.email.toLowerCase();
-    req.headers['host'] = 'zammad.example.com';
-
-    console.log({ headers: req.headers })
-
     return handler(req, res);
   };
 
@@ -33,7 +25,7 @@ const proxy = createProxyMiddleware({
   target: process.env.ZAMMAD_URL,
   changeOrigin: true,
   xfwd: true,
-  ws: true,
+  ws: false,
   pathRewrite: { "^/zammad": "" },
 });
 

apps/link/pages/tickets/[id].tsx

@@ -1,84 +1,24 @@
 import { GetServerSideProps, GetServerSidePropsContext } from "next";
 import Head from "next/head";
 import useSWR from "swr";
-import { request, gql } from "graphql-request";
 import { NextPage } from "next";
 import { Grid } from "@mui/material";
 import { Layout } from "components/Layout";
 import { TicketDetail } from "components/TicketDetail";
 import { TicketEdit } from "components/TicketEdit";
+import { getTicketQuery } from "graphql/getTicketQuery";
 
 type TicketProps = {
   id: string;
 };
 
 const Ticket: NextPage<TicketProps> = ({ id }) => {
-  const origin =
-    typeof window !== "undefined" && window.location.origin
-      ? window.location.origin
-      : "";
-  const graphQLFetcher = async ({ document, variables }: any) => {
-    const data = await request({
-      url: `${origin}/graphql`,
-      document,
-      variables,
-    });
-    console.log({ data });
-
-    return data;
-  };
-
   const { data: ticketData, error: ticketError }: any = useSWR(
     {
-      document: gql`
-        query getTicket($ticketId: Int!) {
-          ticket(ticket: { ticketInternalId: $ticketId }) {
-            id
-            internalId
-            title
-            note
-            number
-            createdAt
-            updatedAt
-            closeAt
-            articles {
-              edges {
-                node {
-                  id
-                  body
-                  internal
-                  sender {
-                    name
-                  }
-                }
-              }
-            }
-          }
-        }
-      `,
-      variables: { ticketId: parseInt(id, 10) },
+      document: getTicketQuery,
+      variables: { ticketId: `gid://zammad/Ticket/${id}` },
     },
-    graphQLFetcher,
-    { refreshInterval: 1000 }
-  );
-
-  const { data: graphqlData2, error: graphqlError2 } = useSWR(
-    {
-      document: gql`
-        {
-          __schema {
-            queryType {
-              name
-              fields {
-                name
-              }
-            }
-          }
-        }
-      `,
-      variables: {},
-    },
-    graphQLFetcher
+    { refreshInterval: 100000 }
   );
 
   const shouldRender = !ticketError && ticketData;

apps/link/pages/tickets/assigned.tsx

@@ -22,7 +22,7 @@ const Assigned: FC = () => (
           width: "100%",
         }}
       >
-        <ZammadWrapper path="/#ticket/view/my_tickets" />
+        <ZammadWrapper path="/#ticket/view/my_assigned" />
       </Grid>
     </Grid>
   </Layout>