feat: uses Apollo instead of URQL

ghoshnirmalya · Jan 14, 2021 · f330e8b · f330e8b
1 parent 37ef1be
commit f330e8b
Show file tree

Hide file tree

Showing 14 changed files with 433 additions and 434 deletions.
diff --git a/frontend/components/navbar/index.tsx b/frontend/components/navbar/index.tsx
@@ -15,8 +15,6 @@ import React from "react";
 const Navbar: NextComponentType = () => {
   const [session] = useSession();
   const { colorMode, toggleColorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.800" };
-  const color = { light: "gray.800", dark: "gray.100" };
 
   const handleToggleTheme = () => {
     toggleColorMode();
@@ -97,8 +95,8 @@ const Navbar: NextComponentType = () => {
   };
 
   return (
-    <Box bg={bgColor[colorMode]}>
-      <Box p={4} color={color[colorMode]} shadow="lg" pos="relative">
+    <Box>
+      <Box p={4} shadow="lg" pos="relative">
         <Box maxW="xl" mx="auto" w="full">
           <Stack
             isInline

diff --git a/frontend/components/pages/feeds/add-new-feed-form.tsx b/frontend/components/pages/feeds/add-new-feed-form.tsx
@@ -1,21 +1,19 @@
-import React, { useState, FormEvent } from "react";
-import gql from "graphql-tag";
-import { useMutation } from "urql";
+import { gql, useMutation } from "@apollo/client";
 import {
-  Box,
-  Stack,
-  FormControl,
-  FormLabel,
-  Button,
   Alert,
   AlertIcon,
   AlertTitle,
+  Box,
+  Button,
   CloseButton,
+  FormControl,
+  FormLabel,
+  Stack,
   Textarea,
-  useColorMode,
 } from "@chakra-ui/react";
-import { useSession } from "next-auth/client";
 import AccessDeniedIndicator from "components/access-denied-indicator";
+import { useSession } from "next-auth/client";
+import React, { ChangeEvent, useState } from "react";
 
 const insertFeedMutation = gql`
   mutation insertFeed($author_id: uuid!, $body: String) {
@@ -26,27 +24,25 @@ const insertFeedMutation = gql`
 `;
 
 const AddNewFeedForm = () => {
-  const { colorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.800" };
-  const color = { light: "gray.800", dark: "gray.100" };
   const [body, setBody] = useState("");
   const [session] = useSession();
+  const [
+    insertFeed,
+    { loading: insertFeedFetching, error: insertFeedError },
+  ] = useMutation(insertFeedMutation);
 
   if (!session) {
     return (
       <AccessDeniedIndicator message="You need to be signed in to add a new feed!" />
     );
   }
 
-  const [
-    { fetching: insertFeedFetching, error: insertFeedError },
-    insertFeed,
-  ] = useMutation(insertFeedMutation);
-
   const handleSubmit = async () => {
     await insertFeed({
-      author_id: session.id,
-      body,
+      variables: {
+        author_id: session.id,
+        body,
+      },
     });
 
     setBody("");
@@ -69,20 +65,14 @@ const AddNewFeedForm = () => {
   return (
     <Stack spacing={4}>
       {errorNode()}
-      <Box
-        p={4}
-        bg={bgColor[colorMode]}
-        color={color[colorMode]}
-        shadow="lg"
-        rounded="lg"
-      >
+      <Box p={4} shadow="lg" rounded="lg">
         <Stack spacing={4}>
           <FormControl isRequired>
             <FormLabel htmlFor="body">What's on your mind?</FormLabel>
             <Textarea
               id="body"
               value={body}
-              onChange={(e: FormEvent<HTMLInputElement>) =>
+              onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
                 setBody(e.currentTarget.value)
               }
               isDisabled={insertFeedFetching}

diff --git a/frontend/components/pages/feeds/feed.tsx b/frontend/components/pages/feeds/feed.tsx
@@ -1,18 +1,13 @@
+import { Avatar, Box, Stack, Text } from "@chakra-ui/react";
+import timeFromNow from "lib/time-from-now";
 import React, { FC } from "react";
-import { Box, Stack, Text, Avatar, useColorMode } from "@chakra-ui/react";
 import IFeed from "types/feed";
-import timeFromNow from "lib/time-from-now";
 
 interface IProps {
   feed: IFeed;
 }
 
 const Feed: FC<IProps> = ({ feed }) => {
-  const { colorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.800" };
-  const color = { light: "gray.800", dark: "gray.100" };
-  const borderColor = { light: "gray.300", dark: "gray.700" };
-
   const authorNode = () => {
     return (
       <Stack
@@ -21,7 +16,6 @@ const Feed: FC<IProps> = ({ feed }) => {
         alignItems="center"
         p={4}
         borderBottomWidth={1}
-        borderColor={borderColor[colorMode]}
       >
         <Avatar name={feed.author.name} src={feed.author.image} />
         <Stack>
@@ -41,12 +35,7 @@ const Feed: FC<IProps> = ({ feed }) => {
   };
 
   return (
-    <Box
-      bg={bgColor[colorMode]}
-      color={color[colorMode]}
-      shadow="lg"
-      rounded="lg"
-    >
+    <Box shadow="lg" rounded="lg">
       <Stack spacing={0}>
         {authorNode()}
         {bodyNode()}

diff --git a/frontend/components/pages/feeds/index.tsx b/frontend/components/pages/feeds/index.tsx
@@ -1,10 +1,10 @@
-import React from "react";
-import gql from "graphql-tag";
-import { useSubscription } from "urql";
+import { useSubscription, gql } from "@apollo/client";
 import { Box, Stack } from "@chakra-ui/react";
-import IFeed from "types/feed";
-import Feed from "components/pages/feeds/feed";
+import Loader from "components/loader";
 import AddNewFeedForm from "components/pages/feeds/add-new-feed-form";
+import Feed from "components/pages/feeds/feed";
+import React from "react";
+import IFeed from "types/feed";
 
 const feedsSubscription = gql`
   subscription fetchFeeds {
@@ -22,22 +22,20 @@ const feedsSubscription = gql`
 `;
 
 const FeedsPageComponent = () => {
-  const [result] = useSubscription({
-    query: feedsSubscription,
-  });
+  const { data, loading } = useSubscription(feedsSubscription, {});
 
-  if (!result.data) {
-    return <p>No feeds!</p>;
+  if (loading) {
+    return <Loader />;
   }
 
   return (
     <Stack spacing={8}>
       <Box>
         <AddNewFeedForm />
       </Box>
-      {result.data.feeds.map((feed: IFeed) => {
+      {data.feeds.map((feed: IFeed, index: number) => {
         return (
-          <Box key={feed.id}>
+          <Box key={index}>
             <Feed feed={feed} />
           </Box>
         );

diff --git a/frontend/components/pages/index/index.tsx b/frontend/components/pages/index/index.tsx
@@ -1,22 +1,12 @@
-import React from "react";
-import {
-  Box,
-  Heading,
-  Stack,
-  Text,
-  Button,
-  Flex,
-  useColorMode,
-} from "@chakra-ui/react";
+import { Box, Button, Flex, Heading, Stack, Text } from "@chakra-ui/react";
 import { signIn, signOut, useSession } from "next-auth/client";
 import Link from "next/link";
+import React from "react";
 
 const IndexPageComponent = () => {
   const [session] = useSession();
   const heightOfNavbar: string = "74px";
   const containerPadding: string = "1rem";
-  const { colorMode } = useColorMode();
-  const color = { light: "gray.800", dark: "gray.100" };
 
   const signInButtonNode = () => {
     if (session) {
@@ -66,14 +56,13 @@ const IndexPageComponent = () => {
         minH={`calc(100vh - ${heightOfNavbar} - ${containerPadding}*2)`}
         justifyContent="center"
         alignItems="center"
-        color={color[colorMode]}
       >
         <Stack spacing={4} maxW="xl" mx="auto">
           <Heading textAlign="center">Nextjs Hasura Boilerplate</Heading>
           <Text fontSize="xl" lineHeight="tall" textAlign="center">
             Boilerplate for building applications using Hasura and Next.js. This
             demo application has been built using Chakra UI, NextAuth.js and
-            urql.
+            Apollo.
           </Text>
           <Box>
             <Stack isInline align="center" justifyContent="center">

diff --git a/frontend/components/pages/my-account/index.tsx b/frontend/components/pages/my-account/index.tsx
@@ -1,32 +1,19 @@
-import React, { useEffect, useState, FormEvent } from "react";
-import gql from "graphql-tag";
-import { useQuery, useMutation } from "urql";
+import { gql, useMutation } from "@apollo/client";
 import {
-  Box,
-  Stack,
-  FormControl,
-  FormLabel,
-  Input,
-  useColorMode,
-  Heading,
-  Button,
-  Grid,
   Alert,
   AlertIcon,
   AlertTitle,
+  Box,
+  Button,
   CloseButton,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Stack,
 } from "@chakra-ui/react";
-import Loader from "components/loader";
 import { useSession } from "next-auth/client";
-
-const usersQuery = gql`
-  query fetchUser($userId: uuid!) {
-    users_by_pk(id: $userId) {
-      id
-      name
-    }
-  }
-`;
+import React, { FormEvent, useState } from "react";
 
 const updateUserMutation = gql`
   mutation updateUser($userId: uuid!, $name: String) {
@@ -39,47 +26,20 @@ const updateUserMutation = gql`
   }
 `;
 
-const MyAccountPageComponent = () => {
-  const { colorMode } = useColorMode();
-  const bgColor = { light: "white", dark: "gray.800" };
-  const color = { light: "gray.800", dark: "gray.100" };
-  const [name, setName] = useState("");
+const MyAccountPageComponent = ({ user }) => {
+  const [name, setName] = useState(user.name);
   const [session] = useSession();
-
-  const [
-    { data: fetchUserData, fetching: fetchUserFetching, error: fetchUserError },
-  ] = useQuery({
-    query: usersQuery,
-    variables: {
-      userId: session.id,
-    },
-  });
-
-  useEffect(() => {
-    if (fetchUserData) {
-      const { name } = fetchUserData.users_by_pk;
-
-      setName(name || "");
-    }
-  }, [fetchUserData]);
-
   const [
-    { fetching: updateUserFetching, error: updateUserError },
     updateUser,
+    { loading: updateUserFetching, error: updateUserError },
   ] = useMutation(updateUserMutation);
 
-  if (fetchUserFetching) {
-    return <Loader />;
-  }
-
-  if (fetchUserError) {
-    return <p>Error: {fetchUserError.message}</p>;
-  }
-
   const handleSubmit = () => {
     updateUser({
-      userId: session.id,
-      name,
+      variables: {
+        userId: session.id,
+        name,
+      },
     });
   };
 
@@ -99,14 +59,9 @@ const MyAccountPageComponent = () => {
 
   return (
     <Stack spacing={8}>
-      <Heading color={color[colorMode]}>My Account</Heading>
+      <Heading>My Account</Heading>
       {errorNode()}
-      <Box
-        bg={bgColor[colorMode]}
-        color={color[colorMode]}
-        shadow="sm"
-        rounded="lg"
-      >
+      <Box shadow="sm" rounded="lg">
         <Stack spacing={4}>
           <FormControl isRequired>
             <FormLabel htmlFor="name">Name</FormLabel>