GraphQL is a next-generation API standard that is more efficient, powerful, and flexible than REST. Facebook developed GraphQL and made it open source, and it is currently maintained by a large group of companies and individuals from around the world.

Note that GraphQL is an API standard, so don’t look at the end of QL and think it’s a database technology.

A more flexible alternative to REST

REST is a popular way to expose server-side data, simplifying the process of interaction between clients, especially mobile, and servers. But as businesses get more complex, some situations get tricky:

Simply put, what the front end wants, go get it yourself, no need to ask the back end to write. In contrast to RESTAPI development, there is no front-end calling the back-end write interface. The back-end only needs to write one dimension of data, and the front-end requests the data according to certain fields and then gets the data.

I have no love for PHP since I got into node.js. Why is that?

First, most PHP frameworks deal with the Web side. Yii and Laravel can handle things that PHP can’t, but doing a queue after a project is run can be quite complicated.

Second, the NPM library is many times more than PHP Composer, many businesses can say, a NPM you can not solve? I live XX.

Third, JavaScript now has typescript, making development assistance much more normative and readable.

Fourth, from the perspective of enterprises, I hire a Node.js engineer, which is equivalent to hiring a full-stack engineer, saving costs.

Fifth, Node.js has powerful asynchronous processing async/await whereas PHP doesn’t have [don’t swoole me] callbacks that are already written into the ass.

Getting back to the point, I use typescript, if you beale look at the changes.

To simply build the system architecture, we need to rely on the following packages.

package.json

"Dependencies" : {" @ types/body - the parser ":" ^ 1.17.0 ", "@ types/express" : "^ 4.16.1", "@ types/node" : "^ 11.11.3 Apollo -", "errors", "^ 1.9.0", "Apollo - server - express" : "^ from 2.4.8", "body - parser" : "^ 1.18.3", "express" : "^ 4.16.4 graphql", ""," ^ 14.1.1 ", "graphql - import" : "^ 0.7.1", "graphql - tools" : "^ 4.0.4"}, "devDependencies" : Ts - node "{"," ^ 8.0.3 ", "ts - node - dev" : "^ 1.0.0 - pre. 32", "typescript" : "^ 3.3.3333"}Copy the code

My tsconfig.json configuration is as follows

tsconfig.json

{
    "compilerOptions": {
        "rootDir": ".",
        "outDir": "build",
        "strictNullChecks": false,
        "moduleResolution": "node",
        "esModuleInterop": false,
        "experimentalDecorators": false,
        "noUnusedParameters": false,
        "noUnusedLocals": false,
        "noImplicitAny": false,
        "target": "es6",
        "lib": [
            "dom",
            "es7"
        ]
    },
    "exclude": [
        "node_modules",
        "lib",
        "es"
    ]
}
Copy the code

Let’s look at the program file path


image.png

Express GraphQL Apollo -server- Express GraphQL-import graphQL-tools

We created Express with a program entry for GraphQL

import * as express from 'express'; import * as path from 'path'; import * as bodyParser from 'body-parser'; import graphql from './graphql'; const app = express(); app.use(bodyParser.json({ limit: "20mb" })); app.use(bodyParser.urlencoded({ limit: "20mb", extended: true })); app.use(express.static(path.join(__dirname, '.. /public'))); graphql(app); app.listen(4000, () => { console.log('server started on port 4000'); });Copy the code

application/graphql/index.ts

import { ApolloServer, gql } from 'apollo-server-express'; import { formatError } from 'apollo-errors'; import { makeExecutableSchema } from 'graphql-tools'; import * as path from 'path'; // Use this if you don't want to write strings and want to use graphQL files. import { importSchema } from 'graphql-import'; Import resolvers from './models/resolvers'; // GraphQL Schema root file const typeDefs = importSchema(path.join(__dirname, 'models/schema.graphql')); const schema = makeExecutableSchema({ typeDefs: typeDefs, resolvers: resolvers }); export default (app: any): void => { const server = new ApolloServer({ schema, formatError }); server.applyMiddleware({ app, path: '/graphql' }) }Copy the code

schema.graphql

# import Query.*, Mutation.* from "./test/test.graphql"
# import Query.* from "./name/name.graphql"
Copy the code

resolvers.ts

import test from './test'; import name from './name'; export default { Query: { ... test.Query, ... name.Query }, Mutation: { ... test.Mutation } }Copy the code


image.png

Yeah, yeah, there’s no MVC, there’s just Model. Data exchange is left to the front end to handle MVC, in other words, the back end can pay more attention to the development of data mining, performance optimization, microservices, etc. UX’s business operations are front-end development, and the back end can focus more on the business logic of its own applications

The graphqL-import content is relatively simple, please query the following graphqL-import on Github and you can see the content immediately

The only thing to watch out for are parameters

type Query { hello(name: String!) Export default {// Query: {hello: (_, {name}) => {console.log(name); return name; }}}Copy the code


image.png

Project address github.com/rainbowMore…