feat: making login request with apollo client

MarcoEscaleira · Jan 2, 2024 · b5158d2 · b5158d2
1 parent 3b60336
commit b5158d2
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 9 deletions.
diff --git a/.graphqlrc b/.graphqlrc
@@ -0,0 +1,3 @@
+{
+  "schema": "http://localhost:8000/graphql"
+}
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@apollo/client": "^3.8.8",
+    "@apollo/experimental-nextjs-app-support": "^0.5.2",
     "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.3",
     "graphql": "^16.8.1",

diff --git a/src/apolloClient.js b/src/apolloClient.js
@@ -0,0 +1,10 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+const createApolloClient = () => {
+  return new ApolloClient({
+    uri: "http://localhost:8000/graphql",
+    cache: new InMemoryCache(),
+  });
+};
+
+export default createApolloClient;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Roboto } from "next/font/google";
 import { Footer, Header } from "@/components";
+import { ApolloWrapper } from "@/lib/apollo-wrapper";
 import "./globals.scss";
 
 const roboto = Roboto({
@@ -23,9 +24,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <>
       <html lang="en">
         <body className={roboto.className} id="root">
-          <Header />
-          <main className="relative flex h-screen w-screen flex-col">{children}</main>
-          <Footer />
+          <ApolloWrapper>
+            <Header />
+            <main className="relative flex h-screen w-screen flex-col">{children}</main>
+            <Footer />
+          </ApolloWrapper>
         </body>
       </html>
     </>

diff --git a/src/components/Login/LoginModal.tsx b/src/components/Login/LoginModal.tsx
@@ -1,13 +1,21 @@
 "use client";
 import { useEffect, useState } from "react";
+import { gql, useMutation } from "@apollo/client";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 import ReactModal from "react-modal";
 import { object, string } from "yup";
 
-ReactModal.setAppElement("#root");
+const LOGIN_USER = gql`
+  mutation LoginUser($input: LoginInput!) {
+    loginUser(input: $input) {
+      access_token
+      status
+    }
+  }
+`;
 
 const schema = object().shape({
   email: string().email().required(),
@@ -17,6 +25,7 @@ const schema = object().shape({
 export function LoginModal() {
   const [isOpen, setIsOpen] = useState(false);
   const params = useParams();
+
   const {
     register,
     handleSubmit,
@@ -26,16 +35,28 @@ export function LoginModal() {
     resolver: yupResolver(schema),
   });
 
+  const [loginMutation, { data, loading, error }] = useMutation(LOGIN_USER);
+
   useEffect(() => {
     if (window.location.hash.includes("login")) {
       setIsOpen(true);
       history.replaceState("", document.title, location.pathname + location.search);
     }
   }, [params]);
 
-  const loginFormSubmit = handleSubmit(data => {
-    // handle submitting the form
-    console.log(data);
+  const loginFormSubmit = handleSubmit(async data => {
+    try {
+      await loginMutation({
+        variables: {
+          input: {
+            email: data.email,
+            password: data.password,
+          },
+        },
+      });
+    } catch (e) {
+      console.log("Something went wrong", e);
+    }
   });
 
   return (

diff --git a/src/lib/apollo-wrapper.tsx b/src/lib/apollo-wrapper.tsx
@@ -0,0 +1,34 @@
+"use client";
+import { ApolloClient, ApolloLink, HttpLink } from "@apollo/client";
+import {
+  ApolloNextAppProvider,
+  NextSSRApolloClient,
+  NextSSRInMemoryCache,
+  SSRMultipartLink,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+
+function makeClient() {
+  const httpLink = new HttpLink({
+    uri: "http://localhost:8000/graphql",
+  });
+
+  return new NextSSRApolloClient({
+    cache: new NextSSRInMemoryCache(),
+    link:
+      typeof window === "undefined"
+        ? ApolloLink.from([
+            // in a SSR environment, if you use multipart features like
+            // @defer, you need to decide how to handle these.
+            // This strips all interfaces with a `@defer` directive from your queries.
+            new SSRMultipartLink({
+              stripDefer: true,
+            }),
+            httpLink,
+          ])
+        : httpLink,
+  });
+}
+
+export function ApolloWrapper({ children }: React.PropsWithChildren) {
+  return <ApolloNextAppProvider makeClient={makeClient}>{children}</ApolloNextAppProvider>;
+}
diff --git a/src/lib/client.ts b/src/lib/client.ts
@@ -0,0 +1,13 @@
+import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
+
+const GRAPHQL_ENDPOINT = "http://localhost:8000/graphql";
+
+export const { getClient } = registerApolloClient(() => {
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: GRAPHQL_ENDPOINT,
+    }),
+  });
+});