💡 chore: upgrade apollo client

Author: henriquepw

README.md

@@ -98,7 +98,7 @@ run `yarn start` or `npm start` command to start a local server and get a test!
 
 ### :package: Packages
 - [Apollo](https://www.apollographql.com/docs/react/)
-- [React Helmet Async](https://github.com/staylor/react-helmet-async)
+- [React Helmet](https://github.com/nfl/react-helmet)
 - [React Icons](https://react-icons.netlify.com/#/)
 - [Styled Compoments](https://www.styled-components.com/)
 - [Polished](https://polished.js.org/)
@@ -113,7 +113,7 @@ run `yarn start` or `npm start` command to start a local server and get a test!
 - [Page Creator](https://www.gatsbyjs.org/packages/gatsby-plugin-page-creator/)
 - [Polished](https://www.gatsbyjs.org/packages/gatsby-plugin-polished/)
 - [Preload Fonts](https://www.gatsbyjs.org/packages/gatsby-plugin-preload-fonts/)
-- [React Helmet Async](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
+- [React Helmet](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/)
 - [Sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/)
 - [Styled Components](https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/)
 

font-preload-cache.json

@@ -1 +1 @@
-{"timestamp":1585927005472,"hash":"53260b0eb5ca3cf626e0786300172b67","assets":{"/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true}}}
+{"timestamp":1598194155286,"hash":"9793e6f763870c321663cfe5f7b34b4c","assets":{"/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/dev-404-page/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/404/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/battlefield/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true,"/static/lato-latin-400-b4d2c4c39853ee244272c04999b230ba.woff2":true},"/fighters/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/result/":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true},"/404.html":{"/static/lato-latin-700-1efbd38aa76ddae2580fedf378276333.woff2":true}}}

gatsby/wrapRootElement.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ApolloProvider } from 'react-apollo';
+import { ApolloProvider } from '@apollo/client';
 import { ThemeProvider } from 'styled-components';
 
-import { client } from '../src/hooks/apollo';
+import apolloClient from '../src/service/apolloClient';
 import { RepositoryProvider } from '../src/hooks/repository';
 import theme from '../src/styles/theme';
 
@@ -12,7 +12,7 @@ interface Props {
 
 export const wrapRootElement: React.FC<Props> = ({ element }) => (
   <ThemeProvider theme={theme}>
-    <ApolloProvider client={client}>
+    <ApolloProvider client={apolloClient}>
       <RepositoryProvider>{element}</RepositoryProvider>
     </ApolloProvider>
   </ThemeProvider>

package.json

@@ -5,8 +5,7 @@
   "version": "1.0.0",
   "author": "Henrique Miranda <hey@thehenry.dev>",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.4",
-    "apollo-boost": "^0.4.7",
+    "@apollo/client": "^3.1.3",
     "babel-plugin-polished": "^1.1.0",
     "dotenv": "^8.2.0",
     "gatsby": "^2.24.47",
@@ -30,7 +29,6 @@
     "isomorphic-fetch": "^2.2.1",
     "polished": "^3.6.5",
     "react": "^16.12.0",
-    "react-apollo": "^3.1.4",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.11.0",

src/components/SearchRepository/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { FaSearch, FaSpinner } from 'react-icons/fa';
 
-import { useLazyQuery } from '@apollo/react-hooks';
+import { useLazyQuery } from '@apollo/client';
 import gql from 'graphql-tag';
 
 import { useRepository } from '~/hooks/repository';

src/hooks/apollo.ts

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import gql from 'graphql-tag';
 
 import Button from '~/components/Button';

src/pages/fighters/index.tsx

@@ -0,0 +1,31 @@
+import {
+  ApolloClient,
+  ApolloLink,
+  concat,
+  HttpLink,
+  InMemoryCache,
+} from '@apollo/client';
+import fetch from 'isomorphic-fetch';
+
+const httpLink = new HttpLink({
+  uri: 'https://api.github.com/graphql',
+  fetch,
+});
+
+/**
+ * An auth middleware for add the GitHub token on the requests
+ */
+const authMiddleware = new ApolloLink((operation, forward) => {
+  operation.setContext({
+    headers: {
+      authorization: `token ${process.env.GATSBY_GITHUB_TOKEN}`,
+    },
+  });
+
+  return forward(operation);
+});
+
+export default new ApolloClient({
+  link: concat(authMiddleware, httpLink),
+  cache: new InMemoryCache(),
+});