使用 React 和 GraphQL-1 构建完整的应用程序

我们正在开启一个新系列，内容是关于最新的 GraphQL。我们在这里构建了一个应用，前端使用 React，并使用 GraphQL 替代 REST API。

本系列教程的灵感来源于freecodecamp 上的 YouTube教程。我们将使用以下技术。

我们的技术

让我们从我们的应用程序开始吧。打开终端，创建一个目录react-graphql，然后在其中创建一个目录server。在 server 目录中，执行npm init创建一个package.json文件。按 Enter 键选择默认选项。

npm init

接下来我们将安装 express。

安装快速

现在，打开代码编辑器，在服务器目录中创建一个新文件app.js。其内容如下。

    const express = require('express');

    const app = express();

    app.listen(4000, () => {
        console.log('Listening at port 4000');
    });

之后，转到您的终端并通过node app.js启动服务器

快速服务器

但是，我们不会通过 node 运行 express 服务器，而是使用名为nodemon的 npm 包。此包会跟踪服务器代码的任何更改并重新启动服务器。

安装 nodemon

我们将再次通过nodemon app.js启动我们的服务器

nodemon app.js

接下来我们再安装graphql和express-graphql两个包

graphql

现在，在服务器内创建一个新的文件夹schema，然后在其中创建一个新的文件schema.js 。

schema.js

在schema.js中输入以下代码。这里，我们首先定义一个BookType类型，然后定义一个名为RootQuery的查询来查询它。

    const graphql = require('graphql');

    const { GraphQLObjectType, GraphQLString, GraphQLSchema } = graphql;

    const BookType = new GraphQLObjectType({
        name: 'Book',
        fields: ( ) => ({
            id: { type: GraphQLString },
            name: { type: GraphQLString },
            genre: { type: GraphQLString }
        })
    });

    const RootQuery = new GraphQLObjectType({
        name: 'RootQueryType',
        fields: {
            book: {
                type: BookType,
                args: { id: { type: GraphQLString } },
                resolve(parent, args){
                    // code from Database

                }
            }
        }
    });

    module.exports = new GraphQLSchema({
        query: RootQuery
    });

现在，我们将在app.js中使用相同的内容

    const express = require('express');
    const graphqlHTTP = require('express-graphql');
    const schema = require('./schema/schema');

    const app = express();

    app.use('/graphql', graphqlHTTP({
        schema
    }));

    app.listen(4000, () => {
        console.log('Listening at port 4000');
    });

接下来，由于数据库尚未准备好，我们将在schema.js中添加一些虚拟数据。在 resolve 函数中，我们将使用 find 方法返回已将 id 作为参数传递的书籍。

    const graphql = require('graphql');

    const { GraphQLObjectType, GraphQLString, GraphQLSchema } = graphql;

    // Dummy data
    var books = [
        { name: 'Name of the Wind', genre: 'Fantasy', id: '1' },
        { name: 'Two States', genre: 'Drama', id: '2' },
        { name: 'The Long Earth', genre: 'Sci-Fi', id: '3' },
    ];

    const BookType = new GraphQLObjectType({
        name: 'Book',
        fields: ( ) => ({
            id: { type: GraphQLString },
            name: { type: GraphQLString },
            genre: { type: GraphQLString }
        })
    });

    const RootQuery = new GraphQLObjectType({
        name: 'RootQueryType',
        fields: {
            book: {
                type: BookType,
                args: { id: { type: GraphQLString } },
                resolve(parent, args){
                    // code from Database - right now dummy data
                    return books.find(item => item.id === args.id);

                }
            }
        }
    });

    module.exports = new GraphQLSchema({
        query: RootQuery
    });

接下来，我们将使用强大的graphiql工具来检查查询，因为我们的前端尚未准备好。我们需要先在

    const express = require('express');
    const graphqlHTTP = require('express-graphql');
    const schema = require('./schema/schema');

    const app = express();

    app.use('/graphql', graphqlHTTP({
        schema,
        graphiql: true
    }));

    app.listen(4000, () => {
        console.log('Listening at port 4000');
    });