Используйте сервер Apollo для создания сервера и клиента GraphQL.

GraphQL

Есть еще много вещей, которые я не понимаю, пожалуйста, поделитесь своим опытом обучения.Если есть ошибки, я надеюсь, что вы, ребята, сможете их исправить~

Что такое GraphQL

GraphQL, Это язык запроса API с открытым исходным кодом Facebook, чтобы запросить данные, предоставляют полное описание, клиент может получить точные необходимые данные, без каких-либо избыточности

graphql

Самый простой метод запроса показан выше, слева — запрос, справа — ответ, я хочу получитьtodoListЭтот набор, каждый элемент в наборе содержит_id,content,completedПоле, возвращаемые сервером данные - это данные, которые мне нужны для запроса, ни больше, ни меньше

Основная концепция GraphQL — Запрос

    type todo {
        _id: ID!
        content: String!
        completed: Boolean!
    }
  • todoУказывает, что это объект GraphQL
  • _id,contentа такжеcompletedдаtodoполя в ,ID,String,BooleanОба являются встроенными типами graphql
  • String!Указывает, что значение этого поля равноStringтип и не обнуляемый

Затем создайте запрос

    type Query {
        todoList: [todo]!
    }
  • Queryа такжеMutetionОба являются ключевыми словами GraphQL, одно для запроса и одно для изменения, которые используются здесь.Queryсоздал запрос
  • [todo]!поле представленияtodoListЗначение определено вышеtodoТип массива,[todo]!Указывает, что поле является либо пустым массивом[], или элементtodoмассив[todo,todo,...]

Типы данных в GraphQL

  • Int: 32-битное целое число со знаком
  • Float: значение с плавающей запятой двойной точности со знаком
  • String: строка UTF-8
  • Boolean: логическое значение
  • ID: Уникальный идентификатор, сериализованный какStringнечитаемый людьми

Достаточно хорошопользовательский тип

Создайте сервер GraphQL

Теперь, когда вы знаете запрос, давайте создадим сервер GraphQL. я используюApollo GraphQL, который представляет собой очень полную реализацию GraphQL, включая клиент и сервер. Сервер узла используетkoaНачать сейчас

Сначала создайте проект и установите следующие зависимости

npm i -S apollo-server-koa graphql koa

создание корневого каталогаapp.jsдокумент

const Koa = require("koa");
const { ApolloServer } = require("apollo-server-koa");

const { gql } = require("apollo-server-koa");

// 定义从服务器获取数据的graphql方法
const typeDefs = gql`
  type todo {
    _id: ID!
    content: String!
    completed: Boolean!
  }
  type Query {
    todoList: [todo]!
  }
`;

const server = new ApolloServer({
  // 使用gql标签和字符串定义的graphql的DocumentNode
  typeDefs,
  // 开启mock
  mocks: true
});

const app = new Koa();

// applyMiddleware将graphql服务连接到koa框架
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

затем бегиnode app.js,существуетhttp://localhost:4000/graphqlможет видетьapollo serverкоторый предоставилplaygroundохватывать

Запрос

{
  todoList{
    _id
    content
    completed
  }
}

Введите запрос выше слева, и фиктивные данные появятся справа.

добавить распознаватели

резолверы — это резолвер, используемый для разбора запроса typeDefs, и ключtype名，值为一个函数的映射 существуетapp.jsдобавлено вresolvers

// ...
// 创建一个数据
const data = [
  {
    _id: "5ca16ed7c39e5a03d8ad3547",
    content: "html5",
    completed: false
  },
  {
    _id: "5ca16ee0c39e5a03d8ad3548",
    content: "javascript",
    completed: false
  },
  {
    _id: "5ca16ee5c39e5a03d8ad3549",
    content: "css",
    completed: false
  }
];
// resolvers
// Query对应查询，todoList是一个函数，返回的是数据
// 可以写异步函数，用于真实的数据库查询
const resolvers = {
  Query: {
    todoList: () => data
  }
};
// 添加resolvers，取消掉mocks
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const app = new Koa();
//...

Запросите еще раз, возвращенный результатdataданные

Основная концепция GraphQL — Мутация

Мутация может соответствовать CRUD в REST API, простойmutationследующим образом существуетtypeDefsувеличить в

    type updateResponse {
        success: Boolean!
        todoList:[todo]!
    }
    type Mutation {
        addTodo(content: String): updateResponse!
    }

Это управление мутацией, увеличивая однуtodoэлемент, возвращаетupdateResponseобъект

  • addTodo(content: String)получитьStringтип параметра
  • updateResponseЗначение включает ключ с именемsuccessзначениеBooleanи ключ с именемtodoListзначениеtodoмассив

Казнить на детской площадке

Изменить распознаватели

const resolvers = {
    Query: {
        todoList: () => data
    },
    Mutation: {
        addTodo: (_, { content }) => {
            console.log(content);
            data.push({
                _id:Math.random().toString(36).substring(3),
                content,
                completed:false
            });
            return { success: true, todoList:data };
        },
    }
};

Конкретные параметры функции можно найти вResolver type signature

воплощать в жизнь

mutation{
  addTodo(content:"css"){
    success
    todoList{
      _id
      content
      completed
    }
  }
}

mutationуказывает, что этоmutationоперация, названная операцияaddTodo, получает файл с именемcontentТипStringпараметр, возвращаемые данныеsuccessа такжеtodoList

Посмотреть параметры из консоли можно в консоли nodejs

Использование GraphQL в клиенте

Официально предоставленные включаютreact,react-native,vue,augular,native-ios...ЖдатьИспользовать в приложении create-реагировать

Хотя официальный компонентный режим предусмотренQueryа такжеMutationкомпонентов, но в процессе обучения я до сих пор использую режим метода, написанный непосредственно на JS,Справочник по клиентскому API

существуетcreate-react-appУстановить зависимости в проекте

npm install apollo-boost react-apollo graphql --save

Создайтеclient.js, И вpackage.jsonувеличить вproxy

import ApolloClient from "apollo-boost";
const Client = new ApolloClient();
const getList = async () => {
    return await Client.query({
        query: gql`
            {
                todoList {
                    _id
                    content
                    completed
                }
            }
        `
    });
};
const add = async content => {
    return await Client.mutate({
		// 参数,content对应的下面的$content
        variables: { content },
        mutation: gql`
            mutation add($content: String!) {
                addTodo(content: $content) {
                    success
                    todoList{
                        _id
                        content
                        completed
                    }
                }
            }
        `
    })
};
export {getList,add};

Обеспечьте поддержку IDE

Я использую webstorm, очень мощную IDE, ищу и устанавливаю плагины.JS GraphQL

экспортschema.json

  • npm install -g apollo-codegen
  • Выполнение корневого каталога клиентаapollo-codegen introspect-schema http://localhost:4000/graphql --output graphql.schema.json

Webstrome предоставит очень интеллектуальные функции форматирования и завершения кода graphql.

Demo

В процессе обучения написал 2 демки.В БД используется mongodb,которым раньше никогда не пользовался,а сейчас учусь,и многие не понимают...

клиент

Сервер

Я еще много чего не понимаю.Документация на английском языке и она очень сложная.До нее еще далеко~

Компания точно не будет использовать graphql, остальное api - проблема, увы...

Категории