Integrated the apollo client with the graphql schema and apis

Author: junip

src/App.js

@@ -1,9 +1,21 @@
 import React from 'react'
 import ReactDOM from 'react-dom';
 import './scss/main.scss'
+import { ApolloProvider } from '@apollo/react-hooks'
+import ShowCountries from '../src/components/ShowCountries'
+import ApolloClient from 'apollo-boost'
+
+const client = new ApolloClient({
+  uri: 'https://countries-274616.ew.r.appspot.com/'
+})
+
 const App = () => {
   return (
-    <div>asd</div>
+   <ApolloProvider client={client}>
+     <div className=""> 
+        <ShowCountries/>
+     </div>
+   </ApolloProvider>
   )
 }
 

src/components/ShowCountries.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useQuery } from '@apollo/react-hooks';
+import { gql } from 'apollo-boost';
+
+const GET_COUNTRIES = gql `
+query {
+	Country {
+    name
+    area
+    nativeName
+  }
+}
+`
+
+
+const showCountries = () => {
+  const { loading, error, data } = useQuery(GET_COUNTRIES);
+  
+  return(
+    <div>
+      { !loading &&
+        data.Country.map((country , i) =>{
+          return(
+          <li key={i}>{country.name} ---- {country.nativeName} --- {country.area}</li>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default showCountries;