Implementing GraphQL Schemas

Implementing GraphQL Schemas

Table of contents

Let's roll up our sleeves and get our hands dirty with GraphQL schemas. Today, we're not just talking theory—we're diving into the practical side of things. Buckle up, because we're about to implement some GraphQL magic!

Define schema

  1. Create a new file named "schema.ts" in the graphql directory. We will use this file for defining all the types for our graphql server.

  2. Define the type "Post" which contains the following items

    (a) id
    (b) title
    (c) content

     type Post {
       id: ID!             # id of the post
       title: String!      # title of the post
       content: String!    # textual content of the post
     }
    
  3. Define the type "User" which contains the following items
    (a) id

    (b) username

    (c) email

    (d) posts: this shows how the posts are related to the user

     type User {
       id: ID!              # id of the user
       username: String!    # username of the user
       email: String!       # email of the user
       posts: [Post]        # posts written by the user
     }
    
  4. Define two query types for fetching user and posts

     type Query {
             getUser(id: ID): User    # query that will return user
             posts:[Post]             # query that will return list of post
         }
    
  5. Combine all these types in graphql string and export them as a module

     const typeDefs = `#graphql
         type Query {
             getUser(id: ID): User
             posts:[Post]
         }
    
         type User {
             id: ID!
             username: String!
             email: String!
             posts: [Post]
         }
    
         type Post {
             id: ID!
             title: String!
             content: String!
         }
     `;
    
     export default typeDefs;
    
  6. We can use this exported file in our graphql server instance

     // importing typedefs aka schema
     import typeDefs from "./graphql/schema";
    
     const server = new ApolloServer({
         typeDefs, // using schema in our graphql server
         resolvers,
     });
    

Look at that! We're building a cozy space for users and their posts.

Pro Tip: Efficient schema relationships make your app perform like a champ.

You can view and fork the complete example on Github: Implementing graphql Schema

What's next?

In the next blog, we will implement the resolvers for the queries defined in the schema here, and try to understand how the post and user relationship works.

Did you find this article valuable?

Support Gaurav Kumar by becoming a sponsor. Any amount is appreciated!