DEV Community

Paramanantham Harrison
Paramanantham Harrison

Posted on • Originally published at learnwithparam.com

Practical example of GraphQL schema design

#webdev #graphql #beginners #tutorial

In this article, we will create a GraphQL schema for a notes app. We will create a schema for creating, updating, deleting and fetching notes. We will then extend the schema to support pagination, custom reports and custom mutations.

type Note {
  id: ID!
  title: String!
  content: String!
  categoryId: ID!
  tags: [String!]!
}
Enter fullscreen mode Exit fullscreen mode

Let's create a schema for creating a note,

type Mutation {
  createNote(
    title: String!
    content: String!
    categoryId: ID!
    tags: [String!]!
  ): Note!
}
Enter fullscreen mode Exit fullscreen mode

Let's create a schema for updating a note,

type Mutation {
  updateNote(
    id: ID!
    title: String!
    content: String!
    categoryId: ID!
    tags: [String!]!
  ): Note!
}
Enter fullscreen mode Exit fullscreen mode

Let's create a schema for deleting a note,

type Mutation {
  deleteNote(id: ID!): Boolean!
}
Enter fullscreen mode Exit fullscreen mode

Let's create a schema for fetching a note,

type Query {
  noteById(id: ID!): Note!
}
Enter fullscreen mode Exit fullscreen mode

Let's create a schema for fetching notes by category,

type Query {
  notesByCategory(categoryId: ID!): [Note!]!
}
Enter fullscreen mode Exit fullscreen mode

Let's create a schema for fetching notes by tags,

type Query {
  notesByTags(tags: [String!]!): [Note!]!
}
Enter fullscreen mode Exit fullscreen mode

Let's create a schema for fetching all notes and support paginated list,

type Query {
  notes(page: Int, limit: Int): [Note!]!
}
Enter fullscreen mode Exit fullscreen mode

Let's create custom reports on notes,

type Query {
  notesReport: NotesReport!
  reportsByCategory: [CategoryReport!]!
}

type NotesReport {
  totalNotes: Int!
  totalCategories: Int!
  totalTags: Int!
}

type CategoryReport {
  categoryId: ID!
  totalNotes: Int!
}
Enter fullscreen mode Exit fullscreen mode

Now, let's create dedicated custom mutations to

  • update catogory
  • add / remove tag 
type Mutation {
  updateCategory(id: ID!, categoryId: ID!): Note!
  addTag(id: ID!, tag: String!): Note!
  removeTag(id: ID!, tag: String!): Note!
}
Enter fullscreen mode Exit fullscreen mode

Hope you enjoyed the article and learn how to create and extend your graphql schema for your application needs 🙏

Top comments (0)

Read next

msnmongare profile image

How to Generate and Display Swagger (OpenAPI) Documentation for Your Laravel API

Sospeter Mong'are -

jullymac profile image

Como publicar um pacote no npm: um guia passo a passo

Juliana Macêdo -

varzoeaa profile image

Laravel Nova vs Filament: The Best Admin Panels

varzoeaa -

mikeyoung44 profile image

Demystifying CXL Heterogeneous Systems with Heimdall Benchmark

Mike Young -