Deploying a GraphQL API on Netlify serverless functions with apollo-server-lambda

Chris Biscardi: [0:00] We have a dashboard that we can add todos on. Unfortunately, this is only local and held in memory in the browser. If we refresh, the todos go away. To fix this, we'll use a GraphQL server inside of a Netlify function.

[0:15] From the root of our project, we want to create a functions directory. We'll also create a graphql directory inside of that, which will house our project. Here, we'll yarn init -y. Note that we created this package outside of our Yarn Workspaces. This is because the package needs to encapsulate its own dependencies.

[0:35] To get a running GraphQL server we'll use apollo-server-lambda and graphql.js. What I've just done is put a full GraphQL server inside of the FQL.js in our new GraphQL package. This GraphQL server only has a single field on the query type, but that's OK because we're only using this as a proof of concept anyway.

[0:55] In Settings under Functions, we can set the Functions Directory. This is where our functions will deploy from. We'll commit this and push it up to Netlify. While it's building, let's go over a little bit about what a GraphQL server does.

[1:09] First, we import ApolloServer and gql from apollo-server-lambda. Our type definitions define the root query type in a single field on that query type called hello, which will return a string. We also define our resolvers which in this case, we only have a single one for hello. We're returning a static string, "Hello world!".

[1:28] Finally, we use the type definitions and the resolvers and we combine them together into the Apollo server. The handler we export is an AWS Lambda compatible function signature. This is because Netlify functions are built on AWS Lambda under the hood and they use the same functions.

[1:44] Our build is deployed, so now we can go to the Functions tab instead of going to our website. Netlify functions are deployed in us-east-1 with 1024MB of memory at 10 second execution limit.

[1:59] Note that we can't name a GraphQL API GraphQL in the package JSON, so we have to name it something like grpahql-api or it will conflict with the GraphQL package.

[2:09] Netlify builds, we're going to have to use Yarn to install the dependencies from the function. This is a quick hack to get us going. In the future, if we had more, we'd probably write a make file.

[2:22] Now that our function is live, we'll see it in the Functions tab where you can see any of the console logs that come out of the function, as well as the endpoint. We can copy the endpoint and go to it directly, which sends us to an interact playground where we can send queries to the server. In this case, we'll ask for hello back.

[2:39] When we run it, we get "Hello world!" This means our function is deployed and working.