Add subscriptions to Instagram clone sample app (#155)

Author: Abu Sakib

instaclone/package-lock.json

@@ -17,6 +17,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.0",
+    "subscriptions-transport-ws": "^0.9.19",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

instaclone/package.json

@@ -3,10 +3,13 @@ import {
   ApolloProvider,
   InMemoryCache,
   createHttpLink,
+  split,
 } from "@apollo/client";
 import { setContext } from "@apollo/client/link/context";
 import { useAuth0 } from "@auth0/auth0-react";
 import { useState, useEffect } from "react";
+import { WebSocketLink } from '@apollo/client/link/ws';
+import { getMainDefinition } from "@apollo/client/utilities";
 import App from "../App";
 
 const ApolloWrapper = () => {
@@ -37,9 +40,32 @@ const ApolloWrapper = () => {
     };
   });
 
+  const wsLink = new WebSocketLink({
+    uri: process.env.REACT_APP_BACKEND_ENDPOINT.replace("https://", "wss://"),
+    options: {
+      reconnect: true,
+      minTimeout: 30000,
+      connectionParams: {
+        "X-Auth-Token": xAuthToken.__raw,
+      },
+    },
+  });
+
+  const splitLink = split(
+    ({ query }) => {
+      const definition = getMainDefinition(query);
+      return (
+        definition.kind === "OperationDefinition" &&
+        definition.operation === "subscription"
+      );
+    },
+    wsLink,
+    authLink.concat(httpLink)
+  );
+
   const client = new ApolloClient({
     cache: new InMemoryCache(),
-    link: authLink.concat(httpLink),
+    link: splitLink,
   });
 
   return (

instaclone/src/Components/ApolloWrapper.js

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/client";
+import { useSubscription } from "@apollo/client";
 import { QUERY_LOGGED_IN_USER } from "../GraphQL/Queries";
 
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
@@ -20,7 +20,7 @@ const Feed = () => {
   const { user } = useAuth0();
   const { email } = user;
 
-  const { data, loading, error } = useQuery(QUERY_LOGGED_IN_USER, {
+  const { data, loading, error } = useSubscription(QUERY_LOGGED_IN_USER, {
     variables: {
       userFilter: {
         email: {

instaclone/src/Components/Feed.js

@@ -1,7 +1,7 @@
 import { gql } from "@apollo/client";
 
 export const QUERY_LOGGED_IN_USER = gql`
- query getUserInfo($userFilter: UserFilter!) {
+ subscription getUserInfo($userFilter: UserFilter!) {
     queryUser(filter: $userFilter) {
       email
       following {