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

ja profile image

How I migrated from Firebase to Supabase

Joe Ashwell -

devopspass profile image

Workshop: make your first AI app in a few clicks with Python+Ollama+llama3

DevOps Pass AI -

madetocode profile image

Beyond the Calculator: Exploring Reverse Polish Notation with JavaScript

Moyomade -

rrajat profile image

Fine-tune your first large language model (LLM) with LoRA, llama.cpp, and KitOps in 5 easy steps

Rajat Raina -