Creating the React Application with an Apollo GraphQL client<\/h2>\n
In this segment of the tutorial, I will help you plug in the parts related to using Apollo GraphQL. I’ve included most of the React app that you will need in a GitHub repo. This premade code that we clone into our project will be a React project that was built with Create Rect App and has routing, navigation, menus, responsive behavior, state and context being managed as well as some utility and other components to support a basic app architecture. I wanted to make sure we only needed to worry about setting up the Apollo GraphQL client, but I wanted to do it in the context of a working application.<\/p>\n
Clone an Existing React Application<\/h3>\n
Our decoupled React frontend will be a sibling to the Let’s clone the starting point for our React project by running the following git command from the root ( In the command above, we removed the `.git` directory as we do not want to take on the existing git history from the project we cloned into our project. You will need to initialize git on your own and periodically commit if you want to. It’s encouraged so that you don’t lose your work.<\/p>\n We now have a working React application added to our project with basic routing. There are some components and utilities that exist in the React project but are not yet hooked up. Before we get to them, let’s run the React application on its own just to make sure everything is working with no errors:<\/p>\n Open the console (\u2318 Cmd + \u2325 Option + I<\/strong> on Mac) (Ctrl + \u2191 Shift + J<\/strong> on PC)<\/p>\n Ensure that clicking back and forth from Home to Airlines does not generate any errors and that there are no errors or major warnings. What we see in this preview is the Airlines route, it is the route we will be adding our master-detail feature to. It’s like someone else already took care of all the styling and basic layout, our job will be to hook up the Before we make changes to the React app, let’s understand some of the files that we have in our project that are not yet in play with our Airline route.<\/p>\n There are 6 files we want to make ourselves familiar with that are standing by and awaiting our use.<\/p>\n A convention that we are using regarding directory structure is that components in the “ withApolloProvider<\/strong> – I am using a higher-order component for readability. Just understand that this is similar to importing the ApolloProvider into a parent component. This may not be best practice, but I like that it keeps my code tidy.<\/p>\n We have Finally, we have the In our project, we have a master-detail component relationship ( It will only display a list of airlines on the left side. As well, a link will show up on the right side of the page that reads: “Select an airline”<\/strong>.<\/p>\n Selecting an airline from the menu will load the details on the right side of the page. Once clicked, we will update the URL with the proper id using a <Link \/> component provided by React Router:<\/p>\n Here we will match the ID We need three packages: If you would like to familiarize yourself with Apollo and GraphQL, the GraphQL documentation for queries<\/a>, is an ideal place to start, also see: GraphQL documentation on making queries<\/a> in Apollo and React.<\/p>\n The `airlines.jsx` file is where we will be doing most of our work. Let’s start by adding some imports:<\/p>\n Underneath the `import { airlineGql }` line, we need to import This wraps our component with an Apollo Provider. I have used this method instead of wrapping our entire application with an ApollloProvider. An attempt to make the code I am sharing a little less complex. We will update the The line that reads:<\/p>\n should be changed to:<\/p>\n Our first argument to the HOC is a React Component `Airlines` (this component). Therefore, when our app is rendered, the Our final imports are the two components that I have already built for you (airline-list.jsx<\/a> and airline-details.jsx<\/a>):<\/p>\n Once those two files are imported we can add their component syntax to our flexbox grid (simple-flexbox<\/a> that we have created helping us to easily split our page by a percentage:<\/p>\n With all of this in place, we just need to deal with our data. Let’s bring React Router’s `match` in by destructuring the props to the `Airlines` Component::<\/p>\n Next, we will add the following to the top level of our What have we just done:<\/strong><\/p>\n The This route in effect says: Look for a route with the name If we run our project right now and our GraphQL Server is not running, we get an error. So we need to start that server before we run our React app to test our master-detail page.<\/p>\n To run our fullstack React and GraphQL project, we will need to first add one more package:<\/p>\n Our app is hosted under one domain (localhost:3000). It makes requests to an API on another domain (localhost:4000). Without CORS the browser’s same-origin policy will block the request.<\/p>\n CORS allows our API to tell the browser that it’s OK for our web app to make requests to it. It does this by sending HTTP headers. We need to use CORS in our Express-GraphQL server. Just add the following code to replace the existing first seven lines.<\/p>\n To get familiar with CORS from the front to the back, check out an article titled: “How to enable CORS for Express-GraphQL & Apollo Server<\/a>”<\/p>\n At this point, we just need to ensure our Couchbase Server instance is up and running.<\/p>\n From the server directory run the node command to start the Express-GraphQL server:<\/p>\n Next, from the client directory lets run the command to start our React client:<\/p>\n The React application connects to the Express-GraphQL API, which in turn queries the Couchbase database to retrieve the Airline data, and now we should have a working app if we visit: localhost:3000<\/a><\/p>\n Now that everything’s working, let’s update the project to run both projects with one npm command.<\/p>\n We need to initialize an npm project in our root directory. The server and client both have their own project directories. We give the root directory its own `package.json` file with only one dependency.<\/p>\n Change directories to the root and run:<\/p>\n This will initialize npm and accept all defaults (otherwise remove the Let’s set up two scripts named We also will use Replace the We have initialized npm at the root of our project, set up two scripts for One final touch is to move the username and password for our Couchbase connection credentials to a Change directories to Next, import Update the code where we use the username and password:<\/p>\n Create a file in our We also need to update the server directories `.gitignore` file. There is a block of ignores labeled `#misc`, let’s modify that block of ignores and add `.env` to it. Remember this file does not get uploaded to git as part of our course control.<\/p>\n Let’s run our project from the root using `npm start` to ensure that everything still works!<\/p>\n We have set up a fullstack React and GraphQL project. Utilizing Couchbase Node SDK<\/a> and Apollo GraphQL client & server, we leverage our knowledge of JavaScript to build a fullstack app. I hope this tutorial helps in your quest to dominate fullstack JavaScript.<\/p>\n I’m available on Twitter @httpJunkie<\/a>, feel free to reach out, my DM is always open! Check out the links provided below to get more information on building with Apollo and React.<\/p>\n The final code for this project can be found on GitHub at: The third of three articles focused on building Fullstack React and GraphQL with the Apollo GraphQL Client. Setting up a NoSQL Couchbase Server (Part 1) Building an Express-GraphQL API (Part 2) Create Apollo GraphQL Client in React (Part 3) Final […]<\/p>\n","protected":false},"author":53002,"featured_media":10876,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1816,1822,1812,2201],"tags":[2210,2454],"ppma_author":[8922],"class_list":["post-8222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-couchbase-server","category-node-js","category-n1ql-query","category-tools-sdks","tag-graphql","tag-react"],"acf":[],"yoast_head":"\ncouchbase-gql-server<\/code> directory. here is a basic idea of what our directory structure will look like:<\/p>\n \r\n rage-with-couchbase\r\n \u2502 \r\n \u2514\u2500\u2500\u2500couchbase-gql-server\r\n \u2502 \r\n \u2514\u2500\u2500\u2500react-apollo-client\r\n<\/pre>\n
rage-with-couchbase<\/code> directory) in our terminal:<\/p>\ngit clone https:\/\/github.com\/httpJunkie\/react-apollo-client.git && cd react-apollo-client && rm -rf .git<\/pre>\n
npm install && npm start<\/pre>\n
![\"preview](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/react-starting-point-layout.jpg\")
<\/a><\/p>\nairline-list.jsx<\/code> and airline-details.jsx<\/code> file in place of the current placeholder text on each side of the page. Luckily our design team has ensured that all of the layout and CSS work is complete!<\/p>\nOverview of Our Assets<\/h3>\n
\n
routes<\/code>” directory are React components that are resolved to form a specific route and those files inside of the “partial<\/code>” directory are components that are not a view loaded by a route, but instead a partial view or a component that could potentially be reused in our application. This is a convention I use, not something React forces us to do.<\/p>\nimport React from 'react'\r\nimport { ApolloProvider, InMemoryCache, ApolloClient } from '@apollo\/client';\r\n\r\nconst withApolloProvider = (WrappedComponent, graphqlEndpoint) => {\r\n const apolloClient = new ApolloClient({\r\n uri: graphqlEndpoint,\r\n cache: new InMemoryCache()\r\n })\r\n\r\n return (props) => (\r\n <ApolloProvider client={apolloClient}>\r\n <WrappedComponent {...props} wrappedBy={\"withApolloProvider\"} \/>\r\n <\/ApolloProvider>\r\n )\r\n}\r\n\r\nexport default withApolloProvider<\/pre>\nairline-list.jsx<\/code><\/a> and a airline-details.jsx<\/code><\/a>, these two components will get loaded side by side in our airlines.jsx<\/code> component. The list will simply display each airline and uses pagination.jsx<\/code><\/a> to ensure we don’t have a long list running down the left side of the page.<\/p>\nairline-gql.js<\/code> file which is simply our GraphQL query<\/a> for all UK Airlines. I like to separate my queries out into another file for organizational purposes, it’s not required, but it cleans up the airlines.jsx<\/code> file.<\/p>\nHow Our Master-Detail Page Works<\/h3>\n
airline-list.jsx<\/code> && airline-details.jsx<\/code>), at the \/airlines<\/code> route. This route resolves to a view component named: airlines.jsx<\/code>, which utilizes React Router’s capabilities to match not only the route but an additional URI parameter (airlineId<\/code>) which we can append to the end of the route to be specific. When no specific airlineId<\/code> URI parameter is present in the URL:<\/p>\nhttps:\/\/localhost:3000\/airlines<\/code><\/p>\nhttps:\/\/localhost:3000\/airlines\/1355<\/code><\/p>\n1355<\/code> with the correct airline already in memory in our React application data and display its appropriate Airline information “British Airways”.<\/p>\nAdding Dependencies for our Apollo GraphQL client<\/h3>\n
@apollo\/react-hooks<\/code><\/a>, apollo-boost<\/code><\/a>, and graphql<\/code><\/a>, brought into the project so let’s cd<\/code> into the react-apollo-client<\/code> directory and run the npm install <\/code> for the packages we need for GraphQL and Apollo:<\/p>\nnpm install @apollo\/client graphql<\/pre>\n
Building The Master-Detail Page<\/h3>\n
import { useQuery } from '@apollo\/client'\r\nimport { airlineGql } from '.\/airline-gql'<\/pre>\nwithApolloProvider<\/code>, a higher-order component.<\/p>\nimport withApolloProvider from '..\/hoc\/withApolloProvider'<\/pre>\n
airlines.jsx<\/code> file’s export.<\/p>\nexport default Airlines<\/code><\/strong><\/p>\nconst WrappedComponent = withApolloProvider(Airlines, 'https:\/\/localhost:4000\/graphql')\r\nexport default WrappedComponent<\/pre>\n
<Airlines \/><\/code> component will be wrapped with our ApolloProvider<\/a>. A provider in React is a function of the Context API. Context provides data throughout the component tree in our React application without having to pass data down through props manually. In our case, the <Airlines \/><\/code> component will be wrapped with our provider giving it access to the data provided by the Apollo Client code defined in that withApolloProvider<\/code> higher-order component.<\/p>\nimport AirlineList from '..\/partial\/airline-list'\r\nimport AirlineDetails from '..\/partial\/airline-details'<\/pre>\n
<Row horizontal=\"spaced\">\r\n <Column flexGrow={1} style={{ minWidth: '280px', width: '65%' }}>\r\n <AirlineList airlines={airlines} \/>\r\n <\/Column>\r\n <Column flexGrow={1} style={{ width: '45%' }}>\r\n <AirlineDetails airline={airline} \/>\r\n <\/Column>\r\n<\/Row><\/pre>\nuseQuery<\/code> returns an object from the Apollo GraphQL client with loading<\/code>, error<\/code>, and data<\/code> properties that we can use. We also need to match on our route’s path (from the URL). Access to that is easy with React Router: (match.params<\/code>).<\/p>\nconst Airlines = ({ match }) => {<\/pre>\nAirlines<\/code> Component:<\/p>\nconst airlineId = Number(match.params.id)\r\n const { loading, error, data } = useQuery(airlineGql)\r\n\r\n if (loading) return <p>Loading...<\/p>\r\n if (error) return <p>Error :( <span style={{color: 'red'}}>{error.message}<\/span> )<\/p>\r\n\r\n const airlines = data.airlinesUK\r\n const airline = match.params.id ? airlines.find(a => a.id === airlineId) : null<\/pre>\n\n
airlineId<\/code> if the match.params.id<\/code> returns a number and not undefined<\/code> (do we have an ID in our route path \/airlines\/1355<\/code> or not \/airlines\/<\/code>?).<\/li>\nairlineGql<\/code> file. Remember that it returns stuff, so we are destructuring those here as well.<\/li>\nairlines<\/code><\/li>\nmatch.params.id<\/code> contains a number it means our route contains an ID, in this case we capture the data for that specific airline into a local variable named airline<\/code> otherwise we store a null value in that variable.<\/li>\n<\/ol>\nmatch<\/code> will work because of the way we set up our route in the App.js<\/code> page:<\/p>\n<Route exact path={[\"\/airlines\/:id\", \"\/airlines\/\"]}\r\n render={(props) => <Airlines {...props} \/>}\r\n\/><\/pre>\n\/airlines\/<\/code> and anything after it will be available using the match.params.id<\/code> syntax.<\/p>\n
\n“Error :( Network error: Failed to fetch )”<\/p>\nRunning Our Full Stack application<\/h3>\n
npm install cors<\/pre>\n
const express = require('express')\r\nconst cors = require('cors')\r\nconst graphqlHTTP = require('express-graphql')\r\nconst { buildSchema } = require('graphql')\r\n \r\nconst couchbase = require('couchbase')\r\n \r\nconst app = express()\r\napp.use(cors())<\/pre>\nnode server<\/pre>\n
npm start<\/pre>\n
![\"Final](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/02\/final-project.gif\")
<\/a><\/p>\nUsing Postinstall and Concurrently<\/h2>\n
npm init -y && npm install concurrently --save-dev<\/pre>\n
-y<\/code> flag) and install the package we need to concurrently run both projects with one command.<\/p>\nclient<\/code> and server<\/code> to run each project individually and then a start<\/code> script to run client and server concurrently.<\/p>\npostinstall<\/code> to run each project’s npm install<\/code> script independently when the root’s npm install<\/code> is complete. postinstall<\/code> is part of npm scripts<\/a> by default. All of these changes that we make below will enable someone to clone your repo, run `npm install && npm start` to which will kick off all three installs, and then concurrently run each project.<\/p>\npackage.json<\/code> that was just added with the following scripts:<\/p>\n\"scripts\": {\r\n \"client\": \"cd react-apollo-client && npm start\",\r\n \"server\": \"cd couchbase-gql-server && node server\",\r\n \"start\": \"concurrently --kill-others \\\"npm run server\\\" \\\"npm run client\\\"\",\r\n \"postinstall\": \"(cd couchbase-gql-server && npm install); (cd react-apollo-client && npm install);\"\r\n },<\/pre>\nclient<\/code> and server<\/code> that we can run concurrently with npm start<\/code>. Also, when someone clone’s our repository, they can now run: npm install && npm start<\/code> and it will install all packages from the three projects and afterward spin them up, so long as they have Couchbase Server running, it will all just work.<\/p>\nRemove User and Pass From Server File<\/h2>\n
.env<\/code> file. This will ensure we don’t ship sensitive credentials to GitHub for the world to see.<\/p>\ncouchbase-gql-server\/<\/code> and install dotenv<\/code>:<\/p>\nnpm install dotenv --save-dev<\/pre>\n
dotenv<\/code> and use object destructuring to get access to the variables we have set up in our .env<\/code> file:<\/p>\nrequire('dotenv').config()\r\nconst { cbUser, cbPass } = process.env<\/pre>\nconst cluster = new couchbase.Cluster('couchbase:\/\/localhost', { \r\n username: cbUser, password: cbPass \r\n})<\/pre>\ncouchbase-gql-server<\/code> directory named .env<\/code>\u00a0 with our Couchbase Server credentials:<\/p>\ncbUser=Administrator\r\ncbPass=password<\/pre>\n
# misc\r\n.DS_Store\r\n.env\r\n.env.local\r\n.env.development.local\r\n.env.test.local\r\n.env.production.local<\/pre>\n
Project Recap<\/h2>\n
\ngithub.com\/httpJunkie\/rage-with-couchbase-final<\/a><\/p>\nApollo and React Resources<\/h2>\n
\n