Deploy a full stack serverless GraphQL app with Apollo, React, and AWS

Nader Dabit: [0:01] To get started, we'll initialize a new React application using create-react-app. Next, we'll change into the new directory and install apollo-boost @apollo/react-hooks and graphql.

[0:25] Next, we'll initialize a new Amplify project. Here, you can choose the project name, the environment name, the default editor, and the defaults for the rest of the questions. When prompted for your AWS profile, choose the profile that you'd like to use.

[0:52] Now that the Amplify project has been initialized, we can create the API. To do so, we'll run amplify add api. For the API type, we'll choose REST, since we'll be creating an HTTP endpoint with the GraphQL path that will serve as the entry point to the GraphQL API. Next, choose a name for the GraphQL API and then provide the path as /graphql.

[1:17] For the Lambda source, we'll create a new Lambda function since we have not yet created any functions in this project. Here we can choose a name for the local function reference, the function name, and then we'll choose the runtime as NodeJS. For the function template, we'll choose a Hello World function that will then edit to be the apolloserver. We can now choose, no, for the rest of the options.

[1:50] Next, let's open the project in our text editor. Here, you'll see an amplify folder holding the backend/function category. Within the function, you'll see an src folder holding the contents of our function. In this folder, we'd like to now install the dependencies that we'll need to run our GraphQL server. To install these dependencies, we'll first change into this directory.

[2:17] Next, either using yarn or npm we'll install apollo-server-lambda and graphql. Next, we'll go back into our project and open the src/index.js file. This file is the entry point to our serverless function and where all of our GraphQL server code will live. We'll start by removing all of the code. Next, we'll import ApolloServer and gql from apollo-server-lambda.

[3:00] Next, we'll create our GraphQL schema by setting a variable called typeDefs. The only definition that we'll use for this example is a query called hello that will return a string. Next, we'll define our resolvers. The only resolver that we'll need is for the hello query. For this query, we'll return a string that says, "Hello from Apollo!"

[3:29] Next, we'll initialize a new ApolloServer passing in the typeDefs and the resolvers that we've already created. To read information about the current request from the API gateway event or the current Lambda context, we'll use the context function. This way, all of this information can be passed to the resolvers.

[4:04] Finally, we'll set the exports.handler to server.createHandler. Since we'll be calling this application from a client setup, we'll need to set some cors options. Here, we'll set the origins to a wildcard and the credentials property to true.

[4:20] Now we're ready to deploy the backend. To do so, we can run amplify push. Now that the backend has been deployed, we can update our frontend code. To do so, we'll open src/App.js. We'll first import the ApolloClient and gql from apollo-boost.

[4:48] Next, we'll import the ApolloProvider and the useQuery hook from @apollo/react-hooks. Next, we'll import the configuration that was created by the amplify CLI located at aws-export.js. Let's take a look at this file. Here, you'll see a property called aws_cloud_logic_custom that holds the endpoint and the information about our API. We can even copy this endpoint and test it out in our browser.

[5:18] Here I'll paste it in and go to the /graphql endpoint. Here, we can test out our backend by running GraphQL operations in this graphical editor. Back in our code, we'll now destructure this endpoint from our configuration.

[5:45] Next, we'll define our query. In our App component, we'll get a loading error and data variable by using the useQuery hook passing in our query. If the request is loading, we'll return a loading message. If there's an error, we'll log out the error and then return an error message.

[6:30] In our UI, we'll delete most of the boilerplate and replace it with an <h1> tag that will render out the data.hello property, which is going to be our message that comes back from our GraphQL server.

[6:43] We'll next create a new instance of ApolloClient setting the URI to the endpoint /graphql. Finally, we'll create a new component called AppWithProvider. Here, we'll return the ApolloProvider passing in the client that we just created, wrapping the main App component. The last thing we need to do is switch out the default export to be the AppWithProvider.

[7:20] To test everything out, we can run npm start. When the app loads, we should see our greeting coming back from our GraphQL server.