Add interactive GraphQL roadmap

components/home/featured-roadmaps-list.tsx

@@ -20,12 +20,12 @@ export const upcomingRoadmaps = [
     description: 'Step by step guide to become a Cyber Security Expert',
     id: 'cyber-security'
   },
-  {
-    type: 'Skill Based',
-    title: 'TypeScript',
-    description: 'Step by step guide to learn TypeScript in 2022',
-    id: 'typescript'
-  },
+  // {
+  //   type: 'Skill Based',
+  //   title: 'TypeScript',
+  //   description: 'Step by step guide to learn TypeScript in 2022',
+  //   id: 'typescript'
+  // },
   // {
   //   type: 'Skill Based',
   //   title: 'Rust',

content/roadmaps.json

@@ -1115,6 +1115,51 @@
     "id": "aspnet-core",
     "metaPath": "/roadmaps/116-aspnet-core/meta.json"
   },
+  {
+    "seo": {
+      "title": "GraphQL Roadmap",
+      "description": "Learn GraphQL with this step by step guide and resources.",
+      "keywords": [
+        "guide to learn graphql",
+        "graphql roadmap",
+        "graphql roadmap",
+        "modern graphql roadmap",
+        "fullstack graphql roadmap",
+        "design and architecture roadmap",
+        "scalable design roadmap",
+        "design architecture patterns roadmap",
+        "application architectures"
+      ]
+    },
+    "title": "GraphQL",
+    "description": "Step by step guide to learn GraphQL",
+    "featuredTitle": "GraphQL",
+    "type": "tool",
+    "featuredDescription": "Step by Step guide to learn GraphQL in 2022",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "isNew": true,
+    "isUpcoming": false,
+    "featured": true,
+    "jsonUrl": "/project/graphql.json",
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "/pdfs/graphql.pdf",
+    "relatedRoadmaps": [
+      "frontend",
+      "backend",
+      "nodejs",
+      "javascript",
+      "react",
+      "vue",
+      "angular"
+    ],
+    "contentPathsFilePath": "/roadmaps/116-graphql/content-paths.json",
+    "id": "graphql",
+    "metaPath": "/roadmaps/116-graphql/meta.json"
+  },
   {
     "seo": {
       "title": "Learn to become a modern Flutter developer",
@@ -1157,10 +1202,6 @@
       "2018",
       "2017"
     ],
-    "author": {
-      "name": "Moien Tajik",
-      "url": "https://twitter.com/MoienTajik"
-    },
     "pdfUrl": "/pdfs/flutter.pdf",
     "relatedRoadmaps": [
       "backend",

content/roadmaps/116-graphql/content-paths.json

@@ -0,0 +1,66 @@
+{
+  "home": "/roadmaps/116-graphql/content/readme.md",
+  "graphql-introduction": "/roadmaps/116-graphql/content/100-graphql-introduction/readme.md",
+  "graphql-introduction:what-is-graphql": "/roadmaps/116-graphql/content/100-graphql-introduction/100-what-is-graphql.md",
+  "graphql-introduction:problems-graphql-solves": "/roadmaps/116-graphql/content/100-graphql-introduction/101-problems-graphql-solves.md",
+  "graphql-introduction:thinking-in-graphs": "/roadmaps/116-graphql/content/100-graphql-introduction/102-thinking-in-graphs.md",
+  "graphql-introduction:graphql-on-the-frontend": "/roadmaps/116-graphql/content/100-graphql-introduction/103-graphql-on-the-frontend.md",
+  "graphql-introduction:graphql-on-the-backend": "/roadmaps/116-graphql/content/100-graphql-introduction/104-graphql-on-the-backend.md",
+  "graphql-queries": "/roadmaps/116-graphql/content/101-graphql-queries/readme.md",
+  "graphql-queries:what-are-queries": "/roadmaps/116-graphql/content/101-graphql-queries/100-what-are-queries.md",
+  "graphql-queries:fields": "/roadmaps/116-graphql/content/101-graphql-queries/101-fields.md",
+  "graphql-queries:aliases": "/roadmaps/116-graphql/content/101-graphql-queries/102-aliases.md",
+  "graphql-queries:arguments": "/roadmaps/116-graphql/content/101-graphql-queries/103-arguments.md",
+  "graphql-queries:directives": "/roadmaps/116-graphql/content/101-graphql-queries/104-directives.md",
+  "graphql-queries:variables": "/roadmaps/116-graphql/content/101-graphql-queries/105-variables.md",
+  "graphql-queries:fragments": "/roadmaps/116-graphql/content/101-graphql-queries/106-fragments.md",
+  "mutations": "/roadmaps/116-graphql/content/102-mutations/readme.md",
+  "mutations:what-are-mutations": "/roadmaps/116-graphql/content/102-mutations/100-what-are-mutations.md",
+  "mutations:multiple-mutation-fields": "/roadmaps/116-graphql/content/102-mutations/101-multiple-mutation-fields.md",
+  "mutations:operation-name": "/roadmaps/116-graphql/content/102-mutations/102-operation-name.md",
+  "subscriptions": "/roadmaps/116-graphql/content/103-subscriptions/readme.md",
+  "subscriptions:what-are-subscriptions": "/roadmaps/116-graphql/content/103-subscriptions/100-what-are-subscriptions.md",
+  "subscriptions:event-based-subscriptions": "/roadmaps/116-graphql/content/103-subscriptions/101-event-based-subscriptions.md",
+  "subscriptions:live-queries": "/roadmaps/116-graphql/content/103-subscriptions/102-live-queries.md",
+  "subscriptions:defer-stream-directives": "/roadmaps/116-graphql/content/103-subscriptions/103-defer-stream-directives.md",
+  "schema": "/roadmaps/116-graphql/content/104-schema/readme.md",
+  "schema:type-system": "/roadmaps/116-graphql/content/104-schema/100-type-system.md",
+  "schema:fields": "/roadmaps/116-graphql/content/104-schema/101-fields.md",
+  "schema:scalars": "/roadmaps/116-graphql/content/104-schema/102-scalars.md",
+  "schema:enums": "/roadmaps/116-graphql/content/104-schema/103-enums.md",
+  "schema:objects": "/roadmaps/116-graphql/content/104-schema/104-objects.md",
+  "schema:lists": "/roadmaps/116-graphql/content/104-schema/105-lists.md",
+  "schema:interfaces": "/roadmaps/116-graphql/content/104-schema/106-interfaces.md",
+  "schema:unions": "/roadmaps/116-graphql/content/104-schema/107-unions.md",
+  "schema:arguments": "/roadmaps/116-graphql/content/104-schema/108-arguments.md",
+  "validation": "/roadmaps/116-graphql/content/104-validation.md",
+  "execution": "/roadmaps/116-graphql/content/105-execution/readme.md",
+  "execution:root-fields": "/roadmaps/116-graphql/content/105-execution/100-root-fields.md",
+  "execution:resolvers": "/roadmaps/116-graphql/content/105-execution/101-resolvers/readme.md",
+  "execution:resolvers:synchronous": "/roadmaps/116-graphql/content/105-execution/101-resolvers/100-synchronous.md",
+  "execution:resolvers:asynchronous": "/roadmaps/116-graphql/content/105-execution/101-resolvers/101-asynchronous.md",
+  "execution:resolvers:scalar-coercion": "/roadmaps/116-graphql/content/105-execution/101-resolvers/102-scalar-coercion.md",
+  "execution:resolvers:lists": "/roadmaps/116-graphql/content/105-execution/101-resolvers/103-lists.md",
+  "execution:validation": "/roadmaps/116-graphql/content/105-execution/102-validation.md",
+  "execution:producing-the-result": "/roadmaps/116-graphql/content/105-execution/103-producing-the-result.md",
+  "serving-over-internet": "/roadmaps/116-graphql/content/106-serving-over-internet/readme.md",
+  "serving-over-internet:graphql-over-http": "/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/readme.md",
+  "serving-over-internet:graphql-over-http:caching": "/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/100-caching.md",
+  "serving-over-internet:graphql-over-http:batching": "/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/101-batching.md",
+  "serving-over-internet:graphql-over-http:authorization": "/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/102-authorization.md",
+  "serving-over-internet:graphql-over-websockets": "/roadmaps/116-graphql/content/106-serving-over-internet/101-graphql-over-websockets/readme.md",
+  "serving-over-internet:graphql-over-websockets:real-time": "/roadmaps/116-graphql/content/106-serving-over-internet/101-graphql-over-websockets/100-real-time.md",
+  "serving-over-internet:graphql-over-websockets:authorization": "/roadmaps/116-graphql/content/106-serving-over-internet/101-graphql-over-websockets/101-authorization.md",
+  "serving-over-internet:graphql-over-sse": "/roadmaps/116-graphql/content/106-serving-over-internet/102-graphql-over-sse/readme.md",
+  "serving-over-internet:graphql-over-sse:authorization": "/roadmaps/116-graphql/content/106-serving-over-internet/102-graphql-over-sse/100-authorization.md",
+  "pagination": "/roadmaps/116-graphql/content/107-pagination.md",
+  "frontend-implementations": "/roadmaps/116-graphql/content/108-frontend-implementations/readme.md",
+  "frontend-implementations:graphql-http": "/roadmaps/116-graphql/content/108-frontend-implementations/100-graphql-http.md",
+  "frontend-implementations:graphql-yoga": "/roadmaps/116-graphql/content/108-frontend-implementations/101-graphql-yoga.md",
+  "frontend-implementations:apollo-server": "/roadmaps/116-graphql/content/108-frontend-implementations/102-apollo-server.md",
+  "frontend-implementations:mercurius": "/roadmaps/116-graphql/content/108-frontend-implementations/103-mercurius.md",
+  "backend-implementations": "/roadmaps/116-graphql/content/109-backend-implementations/readme.md",
+  "backend-implementations:relay": "/roadmaps/116-graphql/content/109-backend-implementations/100-relay.md",
+  "backend-implementations:apollo-client": "/roadmaps/116-graphql/content/109-backend-implementations/101-apollo-client.md",
+  "backend-implementations:urql": "/roadmaps/116-graphql/content/109-backend-implementations/102-urql.md"
+}

content/roadmaps/116-graphql/content/100-graphql-introduction/100-what-is-graphql.md

@@ -0,0 +1 @@
+# What is graphql

content/roadmaps/116-graphql/content/100-graphql-introduction/101-problems-graphql-solves.md

@@ -0,0 +1 @@
+# Problems graphql solves

content/roadmaps/116-graphql/content/100-graphql-introduction/102-thinking-in-graphs.md

@@ -0,0 +1 @@
+# Thinking in graphs

content/roadmaps/116-graphql/content/100-graphql-introduction/103-graphql-on-the-frontend.md

@@ -0,0 +1 @@
+# Graphql on the frontend

content/roadmaps/116-graphql/content/100-graphql-introduction/104-graphql-on-the-backend.md

@@ -0,0 +1 @@
+# Graphql on the backend

content/roadmaps/116-graphql/content/100-graphql-introduction/readme.md

@@ -0,0 +1 @@
+# Graphql introduction

content/roadmaps/116-graphql/content/101-graphql-queries/100-what-are-queries.md

@@ -0,0 +1 @@
+# What are queries

content/roadmaps/116-graphql/content/101-graphql-queries/101-fields.md

@@ -0,0 +1 @@
+# Fields

content/roadmaps/116-graphql/content/101-graphql-queries/102-aliases.md

@@ -0,0 +1 @@
+# Aliases

content/roadmaps/116-graphql/content/101-graphql-queries/103-arguments.md

@@ -0,0 +1 @@
+# Arguments

content/roadmaps/116-graphql/content/101-graphql-queries/104-directives.md

@@ -0,0 +1 @@
+# Directives

content/roadmaps/116-graphql/content/101-graphql-queries/105-variables.md

@@ -0,0 +1 @@
+# Variables

content/roadmaps/116-graphql/content/101-graphql-queries/106-fragments.md

@@ -0,0 +1 @@
+# Fragments

content/roadmaps/116-graphql/content/101-graphql-queries/readme.md

@@ -0,0 +1 @@
+# Graphql queries

content/roadmaps/116-graphql/content/102-mutations/100-what-are-mutations.md

@@ -0,0 +1 @@
+# What are mutations

content/roadmaps/116-graphql/content/102-mutations/101-multiple-mutation-fields.md

@@ -0,0 +1 @@
+# Multiple mutation fields

content/roadmaps/116-graphql/content/102-mutations/102-operation-name.md

@@ -0,0 +1 @@
+# Operation name

content/roadmaps/116-graphql/content/102-mutations/readme.md

@@ -0,0 +1 @@
+# Mutations

content/roadmaps/116-graphql/content/103-subscriptions/100-what-are-subscriptions.md

@@ -0,0 +1 @@
+# What are subscriptions

content/roadmaps/116-graphql/content/103-subscriptions/101-event-based-subscriptions.md

@@ -0,0 +1 @@
+# Event based subscriptions

content/roadmaps/116-graphql/content/103-subscriptions/102-live-queries.md

@@ -0,0 +1 @@
+# Live queries

content/roadmaps/116-graphql/content/103-subscriptions/103-defer-stream-directives.md

@@ -0,0 +1 @@
+# Defer stream directives

content/roadmaps/116-graphql/content/103-subscriptions/readme.md

@@ -0,0 +1 @@
+# Subscriptions

content/roadmaps/116-graphql/content/104-schema/100-type-system.md

@@ -0,0 +1 @@
+# Type system

content/roadmaps/116-graphql/content/104-schema/101-fields.md

@@ -0,0 +1 @@
+# Fields

content/roadmaps/116-graphql/content/104-schema/102-scalars.md

@@ -0,0 +1 @@
+# Scalars

content/roadmaps/116-graphql/content/104-schema/103-enums.md

@@ -0,0 +1 @@
+# Enums

content/roadmaps/116-graphql/content/104-schema/104-objects.md

@@ -0,0 +1 @@
+# Objects

content/roadmaps/116-graphql/content/104-schema/105-lists.md

@@ -0,0 +1 @@
+# Lists

content/roadmaps/116-graphql/content/104-schema/106-interfaces.md

@@ -0,0 +1 @@
+# Interfaces

content/roadmaps/116-graphql/content/104-schema/107-unions.md

@@ -0,0 +1 @@
+# Unions

content/roadmaps/116-graphql/content/104-schema/108-arguments.md

@@ -0,0 +1 @@
+# Arguments

content/roadmaps/116-graphql/content/104-schema/readme.md

@@ -0,0 +1 @@
+# Schema

content/roadmaps/116-graphql/content/104-validation.md

@@ -0,0 +1 @@
+# Validation

content/roadmaps/116-graphql/content/105-execution/100-root-fields.md

@@ -0,0 +1 @@
+# Root fields

content/roadmaps/116-graphql/content/105-execution/101-resolvers/100-synchronous.md

@@ -0,0 +1 @@
+# Synchronous

content/roadmaps/116-graphql/content/105-execution/101-resolvers/101-asynchronous.md

@@ -0,0 +1 @@
+# Asynchronous

content/roadmaps/116-graphql/content/105-execution/101-resolvers/102-scalar-coercion.md

@@ -0,0 +1 @@
+# Scalar coercion

content/roadmaps/116-graphql/content/105-execution/101-resolvers/103-lists.md

@@ -0,0 +1 @@
+# Lists

content/roadmaps/116-graphql/content/105-execution/101-resolvers/readme.md

@@ -0,0 +1 @@
+# Resolvers

content/roadmaps/116-graphql/content/105-execution/102-validation.md

@@ -0,0 +1 @@
+# Validation

content/roadmaps/116-graphql/content/105-execution/103-producing-the-result.md

@@ -0,0 +1 @@
+# Producing the result

content/roadmaps/116-graphql/content/105-execution/readme.md

@@ -0,0 +1 @@
+# Execution

content/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/100-caching.md

@@ -0,0 +1 @@
+# Caching

content/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/101-batching.md

@@ -0,0 +1 @@
+# Batching

content/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/102-authorization.md

@@ -0,0 +1 @@
+# Authorization

content/roadmaps/116-graphql/content/106-serving-over-internet/100-graphql-over-http/readme.md

@@ -0,0 +1 @@
+# Graphql over http

content/roadmaps/116-graphql/content/106-serving-over-internet/101-graphql-over-websockets/100-real-time.md

@@ -0,0 +1 @@
+# Real time

content/roadmaps/116-graphql/content/106-serving-over-internet/101-graphql-over-websockets/101-authorization.md

@@ -0,0 +1 @@
+# Authorization

content/roadmaps/116-graphql/content/106-serving-over-internet/101-graphql-over-websockets/readme.md

@@ -0,0 +1 @@
+# Graphql over websockets

content/roadmaps/116-graphql/content/106-serving-over-internet/102-graphql-over-sse/100-authorization.md

@@ -0,0 +1 @@
+# Authorization

content/roadmaps/116-graphql/content/106-serving-over-internet/102-graphql-over-sse/readme.md

@@ -0,0 +1 @@
+# Graphql over sse

content/roadmaps/116-graphql/content/106-serving-over-internet/readme.md

@@ -0,0 +1 @@
+# Serving over internet

content/roadmaps/116-graphql/content/107-pagination.md

@@ -0,0 +1 @@
+# Pagination

content/roadmaps/116-graphql/content/108-frontend-implementations/100-graphql-http.md

@@ -0,0 +1 @@
+# Graphql http

content/roadmaps/116-graphql/content/108-frontend-implementations/101-graphql-yoga.md

@@ -0,0 +1 @@
+# Graphql yoga

content/roadmaps/116-graphql/content/108-frontend-implementations/102-apollo-server.md

@@ -0,0 +1 @@
+# Apollo server

content/roadmaps/116-graphql/content/108-frontend-implementations/103-mercurius.md

@@ -0,0 +1 @@
+# Mercurius

content/roadmaps/116-graphql/content/108-frontend-implementations/readme.md

@@ -0,0 +1 @@
+# Frontend implementations

content/roadmaps/116-graphql/content/109-backend-implementations/100-relay.md

@@ -0,0 +1 @@
+# Relay

content/roadmaps/116-graphql/content/109-backend-implementations/101-apollo-client.md

@@ -0,0 +1 @@
+# Apollo client

content/roadmaps/116-graphql/content/109-backend-implementations/102-urql.md

@@ -0,0 +1 @@
+# Urql

content/roadmaps/116-graphql/content/109-backend-implementations/readme.md

@@ -0,0 +1 @@
+# Backend implementations

content/roadmaps/116-graphql/content/readme.md

@@ -0,0 +1 @@
+# 

content/roadmaps/116-graphql/meta.json

@@ -0,0 +1,43 @@
+{
+  "seo": {
+    "title": "GraphQL Roadmap",
+    "description": "Learn GraphQL with this step by step guide and resources.",
+    "keywords": [
+      "guide to learn graphql",
+      "graphql roadmap",
+      "graphql roadmap",
+      "modern graphql roadmap",
+      "fullstack graphql roadmap",
+      "design and architecture roadmap",
+      "scalable design roadmap",
+      "design architecture patterns roadmap",
+      "application architectures"
+    ]
+  },
+  "title": "GraphQL",
+  "description": "Step by step guide to learn GraphQL",
+  "featuredTitle": "GraphQL",
+  "type": "tool",
+  "featuredDescription": "Step by Step guide to learn GraphQL in 2022",
+  "isTextHeavy": false,
+  "isCommunity": false,
+  "isNew": true,
+  "isUpcoming": false,
+  "featured": true,
+  "jsonUrl": "/project/graphql.json",
+  "author": {
+    "name": "Denis Badurina",
+    "url": "https://twitter.com/enisdenjo"
+  },
+  "pdfUrl": "/pdfs/graphql.pdf",
+  "relatedRoadmaps": [
+    "frontend",
+    "backend",
+    "nodejs",
+    "javascript",
+    "react",
+    "vue",
+    "angular"
+  ],
+  "contentPathsFilePath": "./content-paths.json"
+}

content/roadmaps/117-flutter/meta.json

@@ -40,10 +40,6 @@
     "2018",
     "2017"
   ],
-  "author": {
-    "name": "Moien Tajik",
-    "url": "https://twitter.com/MoienTajik"
-  },
   "pdfUrl": "/pdfs/flutter.pdf",
   "relatedRoadmaps": [
     "backend",
@@ -54,4 +50,4 @@
     "nodejs"
   ],
   "contentPathsFilePath": "./content-paths.json"
-}
+}

lib/roadmap.ts

@@ -49,5 +49,5 @@ export function getFeaturedRoadmaps(): RoadmapType[] {
 }
 
 export function isInteractiveRoadmap(id: string): boolean {
-  return ['frontend', 'backend', 'devops', 'react', 'vue', 'python', 'java', 'blockchain', 'golang', 'javascript', 'nodejs', 'qa', 'design-system', 'angular', 'software-architect', 'software-design-architecture', 'aspnet-core', 'flutter', 'computer-science'].includes(id);
+  return ['frontend', 'backend', 'devops', 'react', 'vue', 'python', 'java', 'blockchain', 'golang', 'javascript', 'nodejs', 'qa', 'design-system', 'angular', 'software-architect', 'software-design-architecture', 'aspnet-core', 'flutter', 'computer-science', 'graphql'].includes(id);
 }

pages/[roadmap]/interactive.tsx

@@ -183,6 +183,10 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
     minHeight = ['1222px', '1393px', '2288px', '3084px', '3084px', '3084px'];
   }
 
+  if (roadmap.id === 'graphql') {
+    minHeight = ['770px', '1261px', '1617px', '1712px', '1712px', '1712px'];
+  }
+
   return (
     <Container maxW={'container.lg'} position="relative" minHeight={minHeight} pos='relative'>
       {(isLoading || isRendering) && <RoadmapLoader />}

public/sitemap.xml

@@ -120,10 +120,16 @@
               <lastmod>2022-11-14T14:37:05.493Z</lastmod>
               <priority>1.0</priority>
           </url>
+<url>
+              <loc>https://roadmap.sh/graphql</loc>
+              <changefreq>monthly</changefreq>
+              <lastmod>2022-12-12T13:43:44.831Z</lastmod>
+              <priority>1.0</priority>
+          </url>
 <url>
               <loc>https://roadmap.sh/flutter</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-11-14T14:37:05.558Z</lastmod>
+              <lastmod>2022-12-12T13:27:19.515Z</lastmod>
               <priority>1.0</priority>
           </url>
 <url>
@@ -340,7 +346,7 @@
 <url>
               <loc>https://roadmap.sh/signup</loc>
               <changefreq>monthly</changefreq>
-              <lastmod>2022-11-14T14:37:05.596Z</lastmod>
+              <lastmod>2022-12-05T14:00:28.160Z</lastmod>
               <priority>0.9</priority>
           </url>
 <url>

scripts/content-skeleton.ts

@@ -54,6 +54,7 @@ const roadmaps: Record<string, RoadmapType> = {
   'aspnet-core': require('../public/project/aspnet-core.json'),
   'flutter': require('../public/project/flutter.json'),
   'computer-science': require('../public/project/computer-science.json'),
+  'graphql': require('../public/project/graphql.json'),
 };
 
 if (!roadmapKey || !roadmaps[roadmapKey]) {