GraphQL APIs with Apollo Server & Apollo Studio [Part 2]

GraphQL APIs with Apollo Server & Apollo Studio [Part 2]

With our Apollo Server now up and running, we can shift our focus to creating the GraphQL schema for the community app. Users, friends, posts, comments, likes, and notifications are what we'll be focusing on.

Here, we'll develop the index.ts file by writing the type definitions and resolvers in their own files and then importing them. Let's modify the previous example's directory tree and make sure it still functions as expected before we add any more GraphQL types:

Return to your terminal and, from the folder of your backend server, execute the following commands:

cd src && mkdir graphql
cd graphql && touch schema.ts && touch schema.graphql && touch resolvers.ts

Next, go to the src/graphql/schema.graphql file and add the root type:

type Query { 
    echo: String! 
}

Next, go to the src/graphql/resolvers.ts file and add the resolver for the echo field: 

import { IResolvers } from '@graphql-tools/utils'; 

const resolvers: IResolvers = { 
  Query: { 
    echo: () => 'GraphQL is cool!' 
  } 
}; 

export default resolvers;

We've just finished exporting the resolver for the echo field from the file we made, which contains a resolvers variable of the IResolvers type.

Next, go to the src/graphql/schema.ts file and add the following code: 

import fs from 'fs'; 
import { GraphQLSchema } from 'graphql'; 
import { makeExecutableSchema } from '@graphql-tools/schema'; 
import {  gql } from 'apollo-server-express'; 
import resolvers from './resolvers'; 



const typeDefs = gql`${fs.readFileSync(__dirname.concat('/schema.graphql'), 'utf8')}`; 
const schema: GraphQLSchema = makeExecutableSchema({ 
  typeDefs, 
  resolvers
}); 

export default schema;

Here, we use the fs module's readFileSync method to read the query from the graphql file, and we use the import statement to bring in the resolvers from the corresponding typescript file. The typeDefs and resolvers were then passed as arguments to makeExecutableSchema, resulting in a schema that could be exported from the schema.ts file.

Go to the src/index.ts file and update its contents:

import express, { Application } from 'express'; 
import { ApolloServer } from 'apollo-server-express'; 
import schema from './graphql/schema'; 

async function startApolloServer() { 

  const PORT = 8080; 
  const app: Application = express(); 
  const server : ApolloServer = new ApolloServer({schema}); 
  await server.start(); 

  server.applyMiddleware({ 
    app, 
    path: '/graphql'
  }); 

  app.listen(PORT, () => { 
    console.log(`Server is running at http://localhost:${PORT}`); 
  }); 
} 

startApolloServer();

Our schema is imported via the import statement and sent on to the Apollo Server. Let's finish up our basic social community app by adding the necessary types.

Go to the src/graphql/schema.graphql file and add the User type, as follows: 

type User {
  id: ID! 
  username: String!
  password: String! 
  name: String!
  about: String
  email: String!
  avatarImageURL: String!
  coverImage: String 
  posts: [Post!]
  postsCount: Int!  
  following: Int!
  follower: Int!
  datetime: String! 
}

Next, add the Post type:

type Post {
  id: ID!
  postedBy: User!
  imageURL: String!
  description: String
  likes: Int!
  comments: [Comment!]
  likedByCurrentUser: Boolean
  datetime: String!
}

Next, add the Comment type:

type Comment {
  id: ID!
  text: String!
  commentBy: User!
  commentOn: Post!
  datetime: String!
}

Then, add the Notification type:

type Notification { 
  id: ID! 
  text: String! 
  postId: ID! 
  datetime: String! 
}

Finally, update the Query type as follows:

type Query { 
    echo: String! 
    findUser(userId: ID!): User  
    findUsers(searchQuery: String): [User] 
    findPostsByUserId(userId: ID!, offset: Int, limit: Int): [Post!]    
    feed(offset: Int, limit: Int): [Post] 
    findNotificationsByUserId(userId: ID!, offset: Int, limit: Int): [Notification]
    findCommentsByPostId(postId: ID!, offset: Int, limit: Int): [Comment]  
}

Next, add the mutations as follows:

type Mutation { 
  post(text: String, image: String): Post 
  deletePost(id: ID!): ID  
  comment(comment: String!, postId: ID!): Comment 
  deleteComment(id: ID!): Comment 
  like(postId: ID!): ID 
  deleteLike(postId: ID!): ID  
  deleteNotification(id: ID!): ID 
}

If you run your backend server with npm start, the server should start without errors!

This is the basic framework that will be refined in subsequent chapters. Before we move forward with the rest of our GraphQL API development, let's get a grasp on mocking with Apollo Server.