Add Apollo integration to Instagram clone sample app (#146)

Author: Abu Sakib

instaclone/.env

@@ -1,2 +1,3 @@
+REACT_APP_BACKEND_ENDPOINT=""<<your-Dgraph-Cloud-endpoint>>""
 REACT_APP_AUTH0_DOMAIN="<<your-domain-name>>"
 REACT_APP_AUTH0_CLIENT_ID="<<your-auth0-application-client-id>>"

instaclone/package-lock.json

@@ -3,12 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.4.3",
+    "@apollo/client": "^3.4.11",
     "@auth0/auth0-react": "^1.6.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "graphql": "^15.5.1",
+    "graphql": "^15.5.3",
     "grommet": "^2.17.4",
     "grommet-icons": "^4.6.0",
     "install": "^0.13.0",

instaclone/package.json

@@ -1,4 +1,5 @@
 import NavBar from "./Components/Nav";
+import Feed from "./Components/Feed";
 import { Box, Grommet } from "grommet";
 
 const theme = {
@@ -15,6 +16,7 @@ const App = () => (
   <Grommet theme={theme} full>
     <Box fill background="light-3">
       <NavBar />
+      <Feed />
     </Box>
   </Grommet>
 );

instaclone/src/App.js

@@ -0,0 +1,52 @@
+import {
+  ApolloClient,
+  ApolloProvider,
+  InMemoryCache,
+  createHttpLink,
+} from "@apollo/client";
+import { setContext } from "@apollo/client/link/context";
+import { useAuth0 } from "@auth0/auth0-react";
+import { useState, useEffect } from "react";
+import App from "../App";
+
+const ApolloWrapper = () => {
+  const { isAuthenticated, getIdTokenClaims } = useAuth0();
+  const [xAuthToken, setXAuthToken] = useState("");
+
+  useEffect(() => {
+    const getToken = async () => {
+      const token = isAuthenticated ? await getIdTokenClaims() : "";
+      setXAuthToken(token);
+    };
+    getToken();
+  }, [getIdTokenClaims, isAuthenticated]);
+
+  const httpLink = createHttpLink({
+    uri: process.env.REACT_APP_BACKEND_ENDPOINT,
+  });
+
+  const authLink = setContext((_, { headers, ...rest }) => {
+    if (!xAuthToken) return { headers, ...rest };
+
+    return {
+      ...rest,
+      headers: {
+        ...headers,
+        "X-Auth-Token": xAuthToken.__raw,
+      },
+    };
+  });
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: authLink.concat(httpLink),
+  });
+
+  return (
+    <ApolloProvider client={client}>
+      <App />
+    </ApolloProvider>
+  );
+};
+
+export default ApolloWrapper;

instaclone/src/Components/ApolloWrapper.js

@@ -0,0 +1,103 @@
+import { useQuery } from "@apollo/client";
+import { QUERY_LOGGED_IN_USER } from "../GraphQL/Queries";
+
+import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
+import {
+  Spinner,
+  Text,
+  Card,
+  CardBody,
+  Heading,
+  Avatar,
+  CardHeader,
+  Box,
+  Grid,
+  Image,
+  CardFooter,
+} from "grommet";
+
+const Feed = () => {
+  const { user } = useAuth0();
+  const { email } = user;
+
+  const { data, loading, error } = useQuery(QUERY_LOGGED_IN_USER, {
+    variables: {
+      userFilter: {
+        email: {
+          eq: email,
+        },
+      },
+    },
+  });
+
+  if (loading) {
+    return <Spinner />;
+  }
+  if (error) {
+    return (
+      <div>
+        <Text size="large" color="red">
+          {error.message}
+        </Text>
+      </div>
+    );
+  }
+  console.log(data);
+  return (
+    <Box pad="large" direction="row" alignSelf="center">
+      <Grid
+        gap="large"
+        rows="medium"
+        columns={{ count: "fit", size: ["small", "medium"] }}
+      >
+        {data.queryUser.map((userInfo) =>
+          userInfo.following.map((followedUser) =>
+            followedUser.posts.map((post) => (
+              <Card width="medium" key={post.id}>
+                <CardHeader
+                  pad={{ horizontal: "small", vertical: "small" }}
+                  background="light-1"
+                  width="medium"
+                  justify="stretch"
+                  gap="small"
+                >
+                  <Avatar
+                    size="small"
+                    src={post.postedBy.avatarImageURL}
+                    a11yTitle="Generated avatar for the user from robohash.org"
+                  />
+
+                  <Heading level="4" margin="none">
+                    {post.postedBy.username}
+                  </Heading>
+                </CardHeader>
+                <CardBody height="medium">
+                  <Image fit="cover" src={post.imageURL} />
+                </CardBody>
+                <CardFooter
+                  pad={{ horizontal: "small" }}
+                  height="xxsmall"
+                  background="light-3"
+                  justify="between"
+                  gap="xxsmall"
+                >
+                  <Text size="small">{post.description}</Text>
+                  <Heading level="5" margin="none">
+                    {post.likes === 1
+                      ? `${post.likes} like`
+                      : `${post.likes} likes`}
+                  </Heading>
+                </CardFooter>
+              </Card>
+            ))
+          )
+        )}
+      </Grid>
+    </Box>
+  );
+}
+
+// Do not show this component unless the user have logged in
+export default withAuthenticationRequired(Feed, {
+  onRedirecting: () => <Spinner />,
+});

instaclone/src/Components/Feed.js

@@ -0,0 +1,23 @@
+import { gql } from "@apollo/client";
+
+export const QUERY_LOGGED_IN_USER = gql`
+ query getUserInfo($userFilter: UserFilter!) {
+    queryUser(filter: $userFilter) {
+      email
+      following {
+        username
+        avatarImageURL
+        posts {
+          id
+          imageURL
+          description
+          likes
+          postedBy {
+            username
+            avatarImageURL
+          }
+        }
+      }
+    }
+  }
+`;

instaclone/src/GraphQL/Queries.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
 import { Auth0Provider } from "@auth0/auth0-react";
+import ApolloWrapper from './Components/ApolloWrapper';
 
 const domain = process.env.REACT_APP_AUTH0_DOMAIN;
 const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
@@ -13,7 +13,7 @@ ReactDOM.render(
     redirectUri={window.location.origin}
   >
     <React.StrictMode>
-      <App />
+      <ApolloWrapper />
     </React.StrictMode>
   </Auth0Provider>,
   document.getElementById("root")