Ръководство за начинаещи за GraphQL

Нека поговорим за едно от най-големите предизвикателства в уеб разработката: свързването на вашето приложение с базата данни. Въпреки че може да не споделяте подобни идеи, това е една от любимите ми части от разработката от страна на сървъра, така че този урок ще ви покаже моите експериментални и реалистични стратегии, които правят това да работи.

На първо място, след като започнете с детайлите, може да бъде много трудно, тъй като има ТОНОВЕ от различни опции, от които да избирате. Трябва ли да изберете по-стар MySQL, MongoDB, PostgreSQL или по-стар GraphQL? Когато си помислите: „Каква е голямата разлика?“ Не се притеснявайте хора, вие сте като мен, аз също си мислех същото.

Вие използвате това ръководство

Наясно съм, че има стотици други насоки онлайн по същата тема и мога уверено да кажа, че съм разгледал повечето от тях. Когато за първи път започнах с подробностите и GraphQL, бях много объркан. Безброй ресурси и различни методи могат да ви накарат да се чудите: „Трябва ли да го направя по този или онзи начин?“

apollo-server-express

Този пакет е отговорен за настройването на нашия GraphQL сървър. Ако вече сте запознати с GraphQL, може да видите, че има пакет, наречен apollo-сървър, който ще работи добре. Причината да използвам apollo-server-expression е, че можем да използваме GraphQL сървъра до нашия Express сървър.

Инсталирайте този пакет чрез командата по-долу:

npm i apollo-server-express -S

По-късно в тази серия ще трябва да добавим много зависимости, но това е единственото нещо, от което ще се нуждаем за тази част.

Писане на схема

В следващите раздели ще ви науча на някои от основните изисквания на GraphQL, които ще са ни необходими, за да документираме нашия GraphQL сървър. Няма да можем да напишем сървъра, докато не преминете този раздел, така че бъдете търпеливи, докато продължим с този задължителен елемент.

Една от най-важните части на GraphQL (или който и да е език за въпроси) са така наречените секции със схеми. Накратко, схеми представяне на данни под формата на модел. Например, ако имахме приложение за чат и съхранявахме съобщения в базата данни, бихме могли да добавим типа съобщение към нашата схема. Може да изглежда така:

type Message {
  id: Int
  text: String
  from: String
}

Както можете да видите, всяко съобщение, което съхраняваме, ще съдържа id, текст и свойства. Това е подобно на рамката, която ще се прилага за всяко съобщение, което изпращаме.

За да съставим нашата схема, тя ще използва свойството gql на модула apollo-server-express. Вижте примера по-долу:

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

Например, имаме нужда от gql от apollo-server-express. След това нека се преструваме, че създаваме потребителско удостоверяване за нашето приложение за чат. Първо, дефинираме потребителски модел. След това определяме вида на въпроса. В нашия тип заявка имаме метода GetUsers. Зададохме това, за да извлечем данни за тип потребител. За типа потребител всеки потребител ще има следните функции за идентификация, потребителско име, имейл и парола. Удивителен знак зад вещ означава, че собствеността не може да бъде разпоредена.

Писане на решения

Следващото нещо, което трябва да накараме GraphQL да работи, е да напишем някои решения. Накратко, решаващите са групите задачи, които работят по заявката на GraphQL. Това означава, че всеки път, когато създавате заявка от вашата схема, като например заявката GetUsers, която написахме по-горе, ще ви трябва решение за управление на данни и ще изпратите отговор.

resolver всъщност е лесно. Вижте примера по-долу:

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

Точно така - това е много просто нещо. Първо, ние имаме намерение да решим; там ще поставим всички наши решаващи програми. След това, вътре в решението, имаме нещо под въпрос. Това е мястото, където ще поставим всичките ни сортировчици за решаване на проблеми. Можете да видите, че дефинирахме GetUsers в жанра Query, докато пишехме нашата схема. Накрая включваме нашите getUsers, за да разрешим елемента на заявката и да го настроим да замени нишката „Hello World“.

Важно е да се отбележи, че секцията Hello World е временна. Тъй като все още не сме задали модел на данни, все още нямаме връщане. Ето защо връщам „Hello World“. Не се притеснявайте обаче; ние ще включим фиктивен модел на база данни по-късно в проучването. Междувременно обаче ще оставя решенията такива, каквито са, за да можем да започнем да пишем сървъра и да видим някои резултати.

Сървър за писане

Досега не сме видели резултатите от въвеждането на нашите кодове. Просто пишехме код и нищо не се случи. Да, сега е моментът да напишем сървъра. След като намерим сървъра неработещ, ще можем да се свържем с базата данни.

Изненадващо, сървърът е много лесен за инсталиране. Вижте следното:

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

В горния код първо се нуждаем от ApolloServer от пакета apollo-server-express. След това построихме обект за поклонение. Свойството тип Chiefs е мястото, където казваме на нашия сървър нашата схема, а свойството резолюция е мястото, където казваме на сървъра, че са нашите решения. След това инсталираме GraphQL сървъра на нашия виртуален сървър. Разновидността на приложението е гъвкавостта, която обявяваме при стартирането на нашия виртуален сървър.

След цялото това кодиране, кодът във вашия файл index.js трябва да изглежда по следния начин:

const port = process.env.port || 3300;
const express = require('express');
const ejs = require('ejs');
const layouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(layouts);

const homeController = require('./controllers/homeController.js');
app.get('/', homeController.renderIndex);

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

const server = app.listen(port, () => {
  console.log(`🚀 Server listening on port ${port}`);
});

Сега, за да използвате сървъра, отворете терминала на вашия проект / Shell на вашия компютър и изпълнете: node index

Добре! Сървърът работи! Ако обаче навигирате до localhost: 3000 във вашия уеб браузър, няма да видите никаква индикация, че GraphQL сървърът работи. И така, откъде знаем? GraphQL идва с невероятен инструмент за браузър, наречен GraphIQL. Ще използваме това за работа с базата данни.

Домейн и GrafIQL връзки

GraphQL не би бил GraphQL без компонента QL: въпросният език. Трябва да можем да извършваме CRUD операции в базата данни. За целта ще използваме функция на браузъра, наречена GraphIQL.

За достъп до GraphIQL отворете localhost:3300/graphql с вашия работещ сървър. Трябва да видите нещо подобно:

Това е онлайн, напълно интегриран потребителски интерфейс на GraphQL. Това е място, където можем да тичаме и да задаваме въпроси. За да зададете първия си въпрос, въведете кода по-долу в полето отляво и щракнете върху бутона за стартиране.

query findUsers {
  getUsers
}

Първо дефинираме нашата заявка с ключовата дума на заявката и името на нашата заявка (думата може да бъде каквато пожелаете). Ако обаче имаме само един въпрос, нямаме нужда от това. Кодът също ще работи най-добре, ако го напишем така:

{
  getUsers
}

Това, което правите, е извличане на решението GetUsers. След като обработим въпроса, трябва да върнете следните резултати:

{
  "data": {
    getUsers: 'Hello World'
  }
}

Връща нишката на „Hello World“, защото това сме задали да бъде отново в нашето решение GetUsers.

Добавяне към модела на базата данни

Въпреки това нашата GraphQL система и заявка работят добре, но би било чудесно, ако можем да получим реални данни, а не само кратка нишка. За наше щастие това е по силите ни. Първо, нека създадем списък с потребители като този, показан по-долу.

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'[email protected]',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'[email protected]',
    password:'its-a-secret'
  },
]

Освен това имаме двама потребители подред. И двата потребителя съдържат всички свойства, които включваме, за да ги имаме в нашата схема. След това нека направим няколко промени в нашите решения.

От това:

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

На това:

const resolvers = {
  Query: {
    getUsers: _ => users
  }
}

Сега, когато извикаме решенията на GetUsers, те ще извлекат данни от потребителския списък.

Заключение

Ще спра тази част от урока тук, но това наистина не е краят на поредицата! Ето само изтрит GraphQL с малко информация, така че не забравяйте да проверите някои от моите GraphQL компоненти за сериите за начинаещи в google.

Ако харесвате тази статия, помогнете ми да си купя кафе: https://www.buymeacoffee.com/harry1408

Суров Пател | Разработчик на пълен стек | http://imharshpatel.com