Создайте законченное приложение с React и GraphQL-1

Мы начинаем новую серию статей о последней версии GraphQL. Здесь мы создали приложение с React в интерфейсе и GraphQL вместо REST API.

Эта серия была вдохновлена этим уроком youtube от freecodecamp. Мы будем использовать следующие технологии.

Начнем с нашего приложения. Откройте свой терминал и создайте в нем каталог response-graphql, а затем каталог server. В каталоге сервера выполните npm init, чтобы создать файл package.json. Нажмите Enter для всего, чтобы выбрать вариант по умолчанию.

Далее мы установим экспресс.

Теперь откройте редактор кода и создайте новый файл app.js в каталоге server. Содержание того же ниже.

const express = require('express');

const app = express();

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

После этого перейдите в свой терминал и запустите сервер с помощью узла app.js.

Но мы не будем запускать экспресс-сервер по узлам, а вместо этого будем запускать пакет npm под названием nodemon. Этот пакет отслеживает любые изменения в коде нашего сервера и перезапускает сервер.

Мы снова запустим наш сервер с помощью nodemon app.js

Затем мы установим еще два пакета graphql и express-graphql.

Теперь создайте новую папку schema внутри сервера, а затем новый файл 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, поскольку наша база данных еще не готова. А также внутри нашего решения мы будем использовать find для возврата книги, идентификатор которой был передан в качестве аргументов.

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');
});

Затем перейдите по адресу http: // localhost: 4000 / graphql в браузере, и вы увидите инструмент graphiql.

Нажмите Документы в правом верхнем углу, и вы получите документацию по запросам, доступным для этого сервера.

Теперь мы можем запросить у сервера GraphQL книгу с идентификатором 2, и он вернет ее. Нам нужно обновить запрос в редакторе и нажать кнопку play.

То же самое для идентификатора 3, но не нужно указывать идентификатор в операторе возврата.

Если мы запросим несуществующий идентификатор, мы получим null

На этом первая часть серии завершается. Вы можете найти код здесь, в ссылке на гитхабе.

Часть-2 Вы можете найти здесь.

Создайте законченное приложение с React и GraphQL-1

Вопросы по теме