♻️ graphql file structure to role-oriented

graphql/data/index.js

@@ -0,0 +1,11 @@
+const articles = [
+  { id: 1, title: 'Article 1' },
+  { id: 2, title: 'Article 2' },
+  { id: 3, title: 'Article 3' },
+  { id: 4, title: 'Article 4' },
+  { id: 5, title: 'Article 5' }
+]
+
+module.exports = {
+  articles
+}

graphql/models/Article.js

@@ -0,0 +1,11 @@
+const { articles } = require('../data')
+
+class Article {
+  static all () {
+    return articles
+  }
+}
+
+module.exports = {
+  Article
+}

graphql/models/index.js

@@ -0,0 +1,5 @@
+const { Article } = require('./Article')
+
+module.exports = {
+  Article
+}

graphql/resolvers/articlesResolvers.js

@@ -0,0 +1,11 @@
+const { Article } = require('../models')
+
+const articlesResolvers = {
+  Query: {
+    articles: () => Article.all()
+  }
+}
+
+module.exports = {
+  articlesResolvers
+}

graphql/resolvers/index.js

@@ -0,0 +1,7 @@
+const { articlesResolvers } = require('./articlesResolvers')
+
+const resolvers = [articlesResolvers]
+
+module.exports = {
+  resolvers
+}

graphql/typeDefs/index.js

@@ -0,0 +1,8 @@
+const { query } = require('./query')
+const { articleType } = require('./types')
+
+const typeDefs = [query, articleType]
+
+module.exports = {
+  typeDefs
+}

graphql/typeDefs/query.js

@@ -0,0 +1,11 @@
+const { gql } = require('apollo-boost')
+
+const query = gql`
+  type Query {
+    articles: [Article]
+  }
+`
+
+module.exports = {
+  query
+}

graphql/typeDefs/types/articleType.js

@@ -0,0 +1,12 @@
+const { gql } = require('apollo-boost')
+
+const articleType = gql`
+  type Article {
+    id: ID
+    title: String
+  }
+`
+
+module.exports = {
+  articleType
+}

graphql/typeDefs/types/index.js

@@ -0,0 +1,5 @@
+const { articleType } = require('./articleType')
+
+module.exports = {
+  articleType
+}

next.config.js

@@ -2,12 +2,12 @@ const withSass = require('@zeit/next-sass')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 
 module.exports = withSass({
-    cssModules: true,
-    webpack: (config, { dev, isServer }) => {
-        if (isServer) return config
+  cssModules: true,
+  webpack: (config, { dev, isServer }) => {
+    if (isServer) return config
 
-        config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}))
+    config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}))
 
-        return config
-    }
-})
+    return config
+  }
+})

pages/api/graphql.js

@@ -1,29 +1,6 @@
-import { gql, ApolloServer } from 'apollo-server-micro'
-
-const Articles = [
-  { id: 1, title: 'Article 1' },
-  { id: 2, title: 'Article 2' },
-  { id: 3, title: 'Article 3' },
-  { id: 4, title: 'Article 4' },
-  { id: 5, title: 'Article 5' }
-]
-
-const typeDefs = gql`
-    type Query {
-        articles: [Article]
-    }
-
-    type Article {
-        id: ID
-        title: String
-    }
-`
-
-const resolvers = {
-  Query: {
-    articles: (_parent, _args, _context) => Articles
-  }
-}
+const { ApolloServer, gql } = require('apollo-server-micro')
+const { typeDefs } = require('../../graphql/typeDefs')
+const { resolvers } = require('../../graphql/resolvers')
 
 const apolloServer = new ApolloServer({ typeDefs, resolvers })
 const handler = apolloServer.createHandler({ path: '/api/graphql' })