DEV Community

Cover image for Setup GraphQL And Firebase Functions API
Mitch Chimwemwe Chanza
Mitch Chimwemwe Chanza

Posted on • Edited on

Setup GraphQL And Firebase Functions API

#node #graphql #firebasefunctions

To create a GraphQL Node.js and Firebase functions API with TypeScript and Yarn to post and get blog posts for users, follow these steps:

Install the necessary dependencies using Yarn. This includes the GraphQL and Firebase dependencies, as well as TypeScript and any other necessary libraries:

yarn add graphql apollo-server-express firebase-admin @types/graphql @types/firebase-admin
Enter fullscreen mode Exit fullscreen mode

Create a new file called server.ts and import the necessary libraries:

import { ApolloServer } from 'apollo-server-express'; import { FirebaseAdmin, Firestore } from 'firebase-admin'; import { buildFederatedSchema } from '@apollo/federation';
Enter fullscreen mode Exit fullscreen mode

Initialize the Firebase app and connect to the Firestore database:

const firebaseApp = FirebaseAdmin.initializeApp({ credential: FirebaseAdmin.credential.cert(serviceAccount), databaseURL: "https://<DATABASE_NAME>.firebaseio.com" }); const firestore = firebaseApp.firestore();
Enter fullscreen mode Exit fullscreen mode

Define the GraphQL schema for the blog post type, including fields for the title, content, and author:

const typeDefs = gql` type BlogPost { id: ID! title: String! content: String! author: String! } type Query { blogPosts: [BlogPost] } type Mutation { createBlogPost(title: String!, content: String!, author: String!): BlogPost } `;
Enter fullscreen mode Exit fullscreen mode

Implement the resolvers for the GraphQL queries and mutations. These will be used to fetch and store data in the Firestore database:

const resolvers = { Query: { blogPosts: async () => { const blogPostSnapshot = await firestore.collection('blog_posts').get(); return blogPostSnapshot.docs.map((doc) => doc.data()); } }, Mutation: { createBlogPost: async (parent, args) => { const { title, content, author } = args; const blogPost = { title, content, author }; const blogPostRef = await firestore.collection('blog_posts').add(blogPost); return { ...blogPost, id: blogPostRef.id }; } } };
Enter fullscreen mode Exit fullscreen mode

Create the Apollo server and pass in the schema and resolvers. Also, enable the GraphQL Playground for testing:

const server = new ApolloServer({ schema: buildFederatedSchema([{ typeDefs, resolvers }]), playground: true });
Enter fullscreen mode Exit fullscreen mode

Create the Firebase function that will handle requests to the GraphQL API. This function will be triggered when a user makes a request to the API endpoint:

exports.graphql = functions.https.onRequest(server);
Enter fullscreen mode Exit fullscreen mode

Test the API using the GraphQL Playground. You should be able to create and fetch blog posts using the provided queries and mutations.
With these steps, we have created a minimal GraphQL API with firebase functions and Nodejs. Next we will add more functionalities to the API

Watch out for the next Article in the series.

Top comments (0)