♻️ graphql to next js server

.gitignore

@@ -1,2 +1,25 @@
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-package-lock.json
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -11,7 +11,7 @@ npm run dev
 ```
 Open http://localhost:3000 with your browser to see the result.
 
-Our application runs on port `3000`, and GraphQL server also runs on port `3005`.
+Our application runs on port `3000`, and GraphQL server also runs on `localhost:3000/api/graphql`.
 
 ## ⚡ Using Query
 

client/.gitignore

@@ -1,25 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-.env*
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

client/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "apollo-next-graphql-setup",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@apollo/react-hooks": "^3.1.3",
-    "@apollo/react-ssr": "^3.1.3",
-    "@zeit/next-sass": "^1.0.1",
-    "apollo-boost": "^0.4.7",
-    "graphql-tag": "^2.10.3",
-    "isomorphic-unfetch": "^3.0.0",
-    "next": "9.2.2",
-    "next-with-apollo": "^5.0.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "react": "16.13.0",
-    "react-dom": "16.13.0"
-  }
-}

lib/apollo.js

@@ -4,7 +4,7 @@ import { ApolloProvider } from '@apollo/react-hooks'
 import { ApolloClient, InMemoryCache, HttpLink } from 'apollo-boost'
 import fetch from 'isomorphic-unfetch'
 
-const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:3005/graphql'
+const GRAPHQL_URL = process.env.BACKEND_URL || 'http://localhost:3000/api/graphql'
 
   let apolloClient = null
 

package.json

@@ -1,31 +1,25 @@
 {
   "name": "apollo-next-graphql-setup",
-  "version": "1.0.0",
+  "version": "0.1.0",
-  "description": "This is a next-apollo-graphql setup to start develop your web site. This setup uses server side rendering.",
+  "private": true,
-  "main": "index.js",
   "scripts": {
-    "postinstall": "cd ./client && npm install && cd ../server && npm install && cd ..",
+    "dev": "next dev",
-    "build": "npm run --prefix ./client build",
+    "build": "next build",
-    "dev": "concurrently \"npm run --prefix ./server/ dev\" \"npm run --prefix ./client/ dev\"",
+    "start": "next start"
-    "start": "concurrently \"npm run --prefix ./server/ start\" \"npm run --prefix ./client/ start\""
   },
-  "repository": {
+  "dependencies": {
-    "type": "git",
+    "@apollo/react-hooks": "^3.1.3",
-    "url": "git+https://github.com/sergeyyarkov/next-apollo-graphql-setup.git"
+    "@apollo/react-ssr": "^3.1.3",
-  },
+    "@zeit/next-sass": "^1.0.1",
-  "keywords": [
+    "apollo-boost": "^0.4.7",
-    "react",
+    "apollo-server-micro": "^2.10.1",
-    "nextjs",
+    "graphql-tag": "^2.10.3",
-    "nodejs",
+    "isomorphic-unfetch": "^3.0.0",
-    "apollo",
+    "next": "9.2.2",
-    "graphql",
+    "next-with-apollo": "^5.0.0",
-    "apollo-client",
+    "node-sass": "^4.13.1",
-    "express"
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
-  ],
+    "react": "16.13.0",
-  "author": "Sergey Yarkov",
+    "react-dom": "16.13.0"
-  "license": "ISC",
+  }
-  "bugs": {
-    "url": "https://github.com/sergeyyarkov/next-apollo-graphql-setup/issues"
-  },
-  "homepage": "https://github.com/sergeyyarkov/next-apollo-graphql-setup#readme"
 }

pages/api/graphql.js

@@ -0,0 +1,43 @@
+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 = new ApolloServer({
+    typeDefs,
+    resolvers
+});
+
+const handler = apolloServer.createHandler({
+    path: "/api/graphql"
+});
+
+export const config = {
+    api: {
+        bodyParser: false
+    }
+}
+
+export default handler

server/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "graphql-tut",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "dev": "nodemon server/app.js",
-    "start": "node server/app.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "cors": "^2.8.5",
-    "express": "^4.17.1",
-    "express-graphql": "^0.9.0",
-    "graphql": "^14.6.0",
-    "mongoose": "^5.9.2",
-    "nodemon": "^2.0.2"
-  }
-}

server/schema/schema.js

@@ -1,35 +0,0 @@
-const graphql = require('graphql');
-
-const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLID, GraphQLList } = graphql;
-
-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 ArticleType = new GraphQLObjectType({
-    name: 'Article',
-    fields: () => ({
-        id: { type: GraphQLID },
-        title: { type: GraphQLString }
-    })
-})
-
-const Query = new GraphQLObjectType({
-    name: 'Query',
-    fields: {
-        articles: {
-            type: new GraphQLList(ArticleType),
-            resolve() {
-                return Articles
-            }
-        }
-    }
-})
-
-module.exports = new GraphQLSchema({
-  query: Query
-});

server/server/app.js

@@ -1,16 +0,0 @@
-const express = require('express')
-const graphqlHTTP = require('express-graphql')
-const schema = require('../schema/schema')
-const cors = require('cors')
-
-const app = express()
-
-app.use(cors())
-app.use('/graphql', graphqlHTTP({
-    schema,
-    graphiql: true
-}))
-
-const PORT = 3005
-app.listen(PORT, () => console.log(`Server listen port ${PORT}...`))
-