Merge pull request #19 from javascripteverywhere/apollo3

Migrate examples to Apollo Client 3

Author: ascott1

final/App.js

@@ -1,43 +1,50 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ApolloProvider } from '@apollo/react-hooks';
-import ApolloClient, { InMemoryCache } from 'apollo-boost';
+import {
+  ApolloClient,
+  ApolloProvider,
+  createHttpLink,
+  InMemoryCache
+} from '@apollo/client';
+import { setContext } from 'apollo-link-context';
 
 // import global styles
 import GlobalStyle from '/components/GlobalStyle';
 // import our routes
 import Pages from '/pages';
 
+// configure our API URI & cache
 const uri = process.env.API_URI;
+const httpLink = createHttpLink({ uri });
 const cache = new InMemoryCache();
 
-// configure Apollo Client
+// return the headers to the context
+const authLink = setContext((_, { headers }) => {
+  return {
+    headers: {
+      ...headers,
+      authorization: localStorage.getItem('token') || ''
+    }
+  };
+});
+
+// create the Apollo client
 const client = new ApolloClient({
+  link: authLink.concat(httpLink),
   cache,
-  uri,
-  clientState: {
-    resolvers: {},
-    connectToDevTools: true
-  },
-  request: operation => {
-    operation.setContext({
-      headers: {
-        authorization: localStorage.getItem('token') || ''
-      }
-    });
-  }
+  resolvers: {},
+  connectToDevTools: true
 });
 
-const initialCache = new Object({
-  data: {
-    isLoggedIn: !!localStorage.getItem('token')
-  }
-});
+// check for a local token
+const data = {
+  isLoggedIn: !!localStorage.getItem('token')
+};
 
 // write the cache data on initial load
-cache.writeData(initialCache);
-// write the cache data after the stored cache is reset
-client.onResetStore(() => cache.writeData(initialCache));
+cache.writeData({ data });
+// write the cache data after cache is reset
+client.onResetStore(() => cache.writeData({ data }));
 
 const App = () => {
   return (

final/components/DeleteNote.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMutation } from '@apollo/react-hooks';
+import { useMutation } from '@apollo/client';
 import { withRouter } from 'react-router-dom';
 
 import ButtonAsLink from './ButtonAsLink';

final/components/FavoriteNote.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useMutation } from '@apollo/react-hooks';
+import { useMutation } from '@apollo/client';
 
 import ButtonAsLink from './ButtonAsLink';
 import { TOGGLE_FAVORITE } from '../gql/mutation';

final/components/Header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import logo from '../img/logo.svg';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { Link, withRouter } from 'react-router-dom';
 
 import ButtonAsLink from './ButtonAsLink';

final/components/Note.js

@@ -2,8 +2,7 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import { format } from 'date-fns';
 import styled from 'styled-components';
-import { useQuery } from '@apollo/react-hooks';
-import { gql } from 'apollo-boost';
+import { useQuery } from '@apollo/client';
 
 import NoteUser from './NoteUser';
 import { IS_LOGGED_IN } from '../gql/query';

final/components/NoteUser.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { gql } from 'apollo-boost';
+import { useQuery } from '@apollo/client';
 import { Link } from 'react-router-dom';
 
 import DeleteNote from './DeleteNote';

final/gql/mutation.js

@@ -1,4 +1,4 @@
-import { gql } from 'apollo-boost';
+import { gql } from '@apollo/client';
 
 const NEW_NOTE = gql`
   mutation newNote($content: String!) {

final/gql/query.js

@@ -1,4 +1,4 @@
-import { gql } from 'apollo-boost';
+import { gql } from '@apollo/client';
 
 const GET_NOTES = gql`
   query noteFeed($cursor: String) {
@@ -33,9 +33,6 @@ const GET_NOTE = gql`
         avatar
       }
     }
-    me {
-      id
-    }
   }
 `;
 

final/pages/edit.js

@@ -1,16 +1,17 @@
 import React from 'react';
-import { useMutation, useQuery } from '@apollo/react-hooks';
+import { useMutation, useQuery } from '@apollo/client';
 
 // import the NoteForm component
 import NoteForm from '../components/NoteForm';
-import { GET_NOTE } from '../gql/query';
+import { GET_NOTE, GET_ME } from '../gql/query';
 import { EDIT_NOTE } from '../gql/mutation';
 
 const EditNote = props => {
   // store the id found in the url as a variable
   const id = props.match.params.id;
   // define our note query
   const { loading, error, data } = useQuery(GET_NOTE, { variables: { id } });
+  const { data: userdata } = useQuery(GET_ME);
   // define our mutation
   const [editNote] = useMutation(EDIT_NOTE, {
     variables: {
@@ -26,7 +27,7 @@ const EditNote = props => {
   // if there is an error fetching the data, display an error message
   if (error) return <p>Error!</p>;
   // if the current user and the author of the note do not match
-  if (data.me.id !== data.note.author.id) {
+  if (userdata.me.id !== data.note.author.id) {
     return <p>You do not have access to edit this note</p>;
   }
 

final/pages/favorites.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 
 import NoteFeed from '../components/NoteFeed';
 import { GET_MY_FAVORITES } from '../gql/query';