Building a serverless GraphQL API with Azure Functions and Apollo

Posted on by Panther

GraphQL is a query language that allows you to define and describe your data using a schema and then use queries against that schema to request exactly the data you need, nothing more or less. This approach is faster, more efficient, and more flexible than traditional REST APIs.

Azure Functions is Microsoft’s serverless compute service that allows you to run code on-demand, and only pay for the resources you consume. By using Azure Functions with Apollo, you can build a serverless GraphQL API that is scalable, easy to maintain, and cost-effective.

In this tutorial, we will use Visual Studio Code to create a serverless GraphQL API with Azure Functions and Apollo.

Prerequisites

Before we start, make sure you have the following installed on your machine:

  • Node.js and npm
  • Visual Studio Code
  • Azure Functions Core Tools

Step 1: Create a new Azure Functions project

To create a new Azure Functions project, open Visual Studio Code and navigate to File > New Folder. Create a new folder for your project and open it in Visual Studio Code.

Next, open the terminal in Visual Studio Code by pressing Ctrl+Shift+(backtick) on Windows or Cmd+Shift+ (backtick) on macOS. Run the following command to create a new Azure Functions project:

func init MyProject

This will create a new folder called MyProject in your current directory with the necessary files for an Azure Functions project.

Step 2: Create a new Azure Function

Next, we need to create a new Azure Function that will serve as our GraphQL API endpoint. In the terminal, navigate to the MyProject folder and run the following command:

func new

This will open a prompt asking for some information about our new function. Enter the following:

  • HTTP trigger as the template (use the arrow keys to navigate and Enter to select)
  • GraphQLApi as the name of the function (you can use any name you like)
  • Anonymous as the authorization level (since we don’t need authentication for this tutorial)

Once you have entered this information, hit Enter to create the function.

Step 3: Install the required dependencies

Now that we have created our Azure Function, we need to install the required dependencies for our GraphQL API.

First, navigate to the GraphQLApi folder that was created in the previous step:

cd GraphQLApi

Next, run the following command to install the required dependencies:

npm install apollo-server-azure-functions graphql

This will install the apollo-server-azure-functions package, which provides the integration between Apollo and Azure Functions, as well as the graphql package, which we will use to define our schema.

Step 4: Define the GraphQL schema

Now we need to define our GraphQL schema. In the GraphQLApi folder, create a new file called schema.js. In this file, we will define our schema using the graphql package.

const { gql } = require('apollo-server-azure-functions');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

module.exports = typeDefs;

This defines a very simple schema with one query called hello that returns a string.

Step 5: Implement the resolver

Now that we have defined our schema, we need to implement the resolver for our hello query. In the GraphQLApi folder, create a new file called resolvers.js. In this file, we will define our resolver for the hello query.

const resolvers = {
  Query: {
    hello: () => 'Hello, world!'
  }
};

module.exports = resolvers;

This simply returns the string “Hello, world!” when the hello query is executed.

Step 6: Update the Azure Function to use Apollo

Now that we have defined our schema and resolver, we need to update our Azure Function to use Apollo to handle GraphQL queries.

In the GraphQLApi folder, open the index.js file. This is the main file for our Azure Function.

First, we need to import the necessary packages:

const { ApolloServer, gql } = require('apollo-server-azure-functions');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

This imports the ApolloServer and gql objects from the apollo-server-azure-functions package, as well as our schema and resolver modules.

Next, we need to create an instance of ApolloServer:

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
  introspection: true
});

This creates an instance of ApolloServer with our schema and resolver, and enables the GraphQL Playground and introspection.

Finally, we need to export a function that calls the createHandler method of ApolloServer:

module.exports = server.createHandler();

This function will be invoked whenever a GraphQL query is executed against our Azure Function.

Step 7: Deploy the Azure Function to the cloud

Now that we have created our serverless GraphQL API with Azure Functions and Apollo, we need to deploy it to the cloud so that it can be accessed by clients.

To deploy our Azure Function, we can use the Azure CLI. First, make sure you are logged in to your Azure account by running the following command:

az login

Next, navigate to the MyProject folder in the terminal and run the following command to deploy the function:

func azure functionapp publish MyFunctionApp --force

This will deploy the MyFunctionApp function app to Azure. Once the deployment is complete, you can access your GraphQL API endpoint by navigating to `https://MyFunctionApp.azurewebsites.net/api/GraphQLApi`.

Step 8: Test the GraphQL API

Now that our GraphQL API is deployed, we can test it using the GraphQL Playground.

Navigate to `https://MyFunctionApp.azurewebsites.net/api/GraphQLApi` in your browser. You should see the GraphQL Playground interface.

In the left-hand pane, enter the following query:

query {
  hello
}

Then click the “Play” button to execute the query. You should see the response:

{
  "data": {
    "hello": "Hello, world!"
  }
}

Congratulations! You have successfully built and deployed a serverless GraphQL API with Azure Functions and Apollo.

Conclusion

In this tutorial, we have seen how to build a serverless GraphQL API with Azure Functions and Apollo. By using a serverless architecture, we can easily scale our API to handle any load, while only paying for the resources we consume. Apollo provides a powerful and flexible GraphQL framework that allows us to easily define our schema and resolvers, while Azure Functions provides a cost-effective and scalable execution environment.

Whether you are building a new application or migrating an existing one, serverless architectures and GraphQL are powerful tools that can help you to build better, faster, and more efficient APIs.

Related Post