Using Apollo to Query GraphQL from Node.js
It’s a common scenario-you built a quick prototype, it worked great, and now management wants it live yesterday. Maybe you were accessing a third-party GraphQL endpoint and now you’re in a rush to get something out the door. One of your roadblocks? That endpoint doesn’t provide CORS headers. No more calling it directly from your frontend JavaScript app.
Do you need to create an Express app with routes for each data set you need? No way! In this tutorial, we will use the Apollo client library within a Node.js Express app to provide a middleman to your third-party endpoint, without the need to rewrite your GraphQL queries and mutations.
In addition to Apollo, there are several NPM libraries, like lokka and express-graphql, that we could use to abstract our third-party endpoint. Each of these libraries have their pros and cons. We’ll be using Apollo due to its popularity and the level of support it has as part of the Apollo Data Graph Platform.
Want to skip to the end? You can find all the source code for this tutorial on GitHub.
Getting Started
First, let’s get all our files and dependencies in place. Create a folder called nodejs-apollo-client and open it in your terminal of choice.
Now run npm init in your terminal to initialize NPM in the directory. Then execute the script below to install the dependencies.
Build a GraphQL Middleman
Create a new file named apollo.js. This file contains the real "meat" of our solution. It brokers requests between our Express application and the third-party GraphQL endpoint.
Let’s start by copying the following snippet into that file.
The client object is an Apollo client. Because we're running this code on the server-side, fetch isn't available to us. So we'll start by creating an HttpLink manually so we can inject node-fetch in place of the built-in browser fetch.
For our purposes, we’ll use the InMemoryCache object to handle caching data, but in your production solution, you'll likely want to replace this with whatever caching solution you prefer.
Next, copy the snippet below into the apollo.js file.
These functions (query and mutate) take a request, pull query/mutate and variable information from the body, and then forward those parameters using the client object.
Finally, we create an apollo method and export it so we can use it in the Express workflow later. This function inspects the incoming request and forwards it to the appropriate (mutate or query) function.
Take the Express Lane
Now that we’ve got our middleman built, let’s plug it into an Express application. Create an index.js file and copy in the following:
This snippet will tell Express that you want to use JSON and insert our apollo function into the request life cycle. Essentially, every request to this Express application will now be processed by our middleman. So every GraphQL query and mutation will be forwarded on to the third-party endpoint and returned from your local server to your client of choice.
Handling Authentication
The example above can handle scenarios where you don’t have to authenticate with the third-party endpoint, but what happens when we need to send custom headers with each request? As an example, let’s use the Vonage Video Insights API GraphQL endpoint.
The Insights API is a GraphQL API that allows you to explore your session metadata at the project and session level. It requires requests to include a custom header of X-OPENTOK-AUTH with a JWT.
Prerequisites
First, you’ll need a Vonage Video Account. If you don’t have one already, create one for free.
In your Vonage Video Account, click the ‘Projects’ menu and ‘Create New Project’. Then click the ‘Create Custom Project’ button. Give your new project a name and press the ‘Create’ button. You can leave the preferred codec as ‘VP8’.
Copy the API Key and Secret on this screen. We’ll use it later to configure our authentication.
For the full experience, you’ll need data in your Vonage Video account. Take a few minutes to walk through the Hello World Quick Start to build a real-time video application.
Configuration
Create a new file called config.js and paste the code below in it. Be sure to replace the values of the constants with the API Key and Secret you copied previously.
Generating Custom Headers
Now you’ll want to generate a valid JWT to send in the header of each request. To do so, we’ll need to add an NPM package. From your terminal, install the jsonwebtoken package.
Next, create a new file called auth.js and paste the following:
This code exports a method that will create our custom headers object with the necessary X-OPENTOK-AUTH parameter and attached JWT token.
Putting It All Together
Now that we can generate headers appropriately, we’ll need to update our apollo.js code to use them. Open the apollo.js file and add the following snippet:
Next, replace the constructor for the client constant with the following:
Let’s Run a Query
We can now start up the app in the terminal by running node index.js. Then we can send a GraphQL query to http://localhost:3000. Send the following query and variables to retrieve information about the sessions you created earlier.
Query
Variables
Be sure to replace the
{OPENTOK API KEY}above with your actual API Key.
You should receive a result similar to below.
Be sure to check out the Vonage Video API Explorer (you’ll need to be logged in to your Vonage Video account) to review the Insights API schema and learn about other data that is available to you.
Originally published at https://learn.vonage.com/blog/2020/03/12/using-apollo-to-query-graphql-from-node-js-dr/
