Test GraphQL with Next

krushiraj · krushiraj · commit e16250120e54 · 2019-10-20T11:14:13.000+05:30
- Updated next to v9
- Added GraphQL and Apollo related dependencies
- Added _app.js in pages which will add ApolloClient HOC
- Added other GraphQL related config and query files
diff --git a/graphql/users.query.js b/graphql/users.query.js
@@ -0,0 +1,12 @@
+import gql from 'graphql-tag';
+
+export const GET_USERS = gql`
+  query {
+    allUsers {
+      id
+      email
+      firstName
+      lastName
+    }
+  }
+`;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,16 +66,23 @@
     ]
   },
   "dependencies": {
+    "@apollo/react-hooks": "^3.1.3",
+    "apollo-cache-inmemory": "^1.6.3",
+    "apollo-client": "^2.6.4",
+    "apollo-link-http": "^1.5.16",
     "babel-plugin-emotion": "9.2.11",
     "date-fns": "1.30.1",
     "emotion": "9.2.12",
     "emotion-server": "9.2.12",
     "get-port": "5.0.0",
+    "graphql": "^14.5.8",
+    "graphql-tag": "^2.10.1",
     "grid-styled": "5.0.2",
-    "isomorphic-unfetch": "3.0.0",
+    "isomorphic-unfetch": "^3.0.0",
     "lodash.take": "4.1.1",
     "marked": "0.7.0",
-    "next": "8.1.0",
+    "next": "^9.0.5",
+    "next-with-apollo": "^4.3.0",
     "nprogress": "0.2.0",
     "path-match": "1.2.4",
     "prop-types": "15.7.2",
diff --git a/pages/_app.js b/pages/_app.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import App from 'next/app';
+import { ApolloProvider } from '@apollo/react-hooks';
+
+import withData from '../utils/apollo-client';
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps, apollo } = this.props;
+    return (
+      <ApolloProvider client={apollo}>
+        <Component {...pageProps} />
+      </ApolloProvider>
+    );
+  }
+}
+
+// Wraps all components in the tree with the data provider
+export default withData(MyApp);
diff --git a/pages/index.js b/pages/index.js
@@ -4,7 +4,9 @@ import { space } from 'styled-system';
 import { Flex, Box } from 'grid-styled/emotion';
 import take from 'lodash.take';
 import Link from 'next/link';
+import { useQuery } from '@apollo/react-hooks';
 
+import { GET_USERS } from '../graphql/users.query';
 import Hide, { Container, Button, Title, SubTitle, breakpoints } from '../utils/base.styles';
 import { listOfSubjects } from '../utils/mock-data';
 import Layout from '../components/common/layout';
@@ -203,6 +205,26 @@ class UpcomingEvent extends React.Component {
   }
 }
 
+const TestGraphQL = () => {
+  const { data, loading, error } = useQuery(GET_USERS);
+  if (error) return <div>There was an error fetching data!</div>;
+  if (loading) return <div>We are fetching data, please wait for a while.</div>;
+  return (
+    <div>
+      Users:
+      <ul>
+        {data.allUsers.map(({ email, firstName, lastName }, key) => (
+          <li key={key}>
+            <p>
+              Email: {email}, First Name: {firstName}, Last Name: {lastName}
+            </p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
 export default () => (
   <Layout>
     <HeroSection pb={[3, 5]} px={[3, 2]}>
@@ -217,6 +239,7 @@ export default () => (
     </HeroSection>
     <LearnSection pb={[4, 5]} pt={[3, 4]} px={[3, 2]}>
       <Container>
+        <TestGraphQL />
         <Flex flexDirection="column" alignItems="center" justifyContent="center">
           <Box width={1}>
             <Title inverted>Open Source Learning Guides</Title>
diff --git a/utils/apollo-client.js b/utils/apollo-client.js
@@ -0,0 +1,27 @@
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import withApollo from 'next-with-apollo';
+import { createHttpLink } from 'apollo-link-http';
+import fetch from 'isomorphic-unfetch';
+
+// Update the GraphQL endpoint to any instance of GraphQL that you like
+const GRAPHQL_URL = 'http://localhost:8000/graphql';
+
+const link = createHttpLink({
+  fetch, // Switches between unfetch & node-fetch for client & server.
+  uri: GRAPHQL_URL,
+});
+
+// Export a HOC from next-with-apollo
+// Docs: https://www.npmjs.com/package/next-with-apollo
+export default withApollo(
+  // You can get headers and ctx (context) from the callback params
+  // e.g. ({ headers, ctx, initialState })
+  ({ initialState }) =>
+    new ApolloClient({
+      link,
+      cache: new InMemoryCache()
+        // Rehydrate the cache using the initial data passed from the server:
+        .restore(initialState || {}),
+    })
+);
diff --git a/yarn.lock b/yarn.lock
