Ще разгледаме някои от най-добрите клиенти на GraphQL за 2020 г. Преди да започнете, важно е да имате основни познания за GraphQL и неговите сървърни и клиентски приложения.
Какво е GraphQL?
Ако GraphQL изглежда донякъде познат, това е защото звучи като имената на други видове езици за заявки като MySQL. Въпреки че GraphQL е език за заявки (QL), той работи различно от типичния QL. Той използва една крайна точка на API, за да позволи на приложенията да заявяват точно данните, които искат чрез HTTP Post заявка. Това е значително подобрение от необходимостта да се извиква конкретна крайна точка за всеки тип данни.
Тази технология е сравнително нова и беше пусната за обществеността от Facebook през 2015 г. Въпреки това, тя беше част от Facebook от 2012 г. и оттогава бележи бърз растеж и приемане. Това е мощен език за заявки, който може да се използва за комуникация между клиент (обикновено приложение, базирано на браузър) и сървър. Той позволява по-ефективно структуриране на приложения, управлявани от данни, в сравнение с RESTful подход.
GraphQL може да бъде имплементиран във всеки сървърен език и езикова рамка на интерфейса. Важно е да имате предвид, че GraphQL не е обвързан с конкретна технология или приложение за бази данни.
Предимствата на GraphQL
- В сравнение с уеб услугите RESTful е възможно да поискате конкретни точки от данни, без да получавате целия обект от данни. Необходимите точки от данни могат да бъдат посочени в заявката на GraphQL (заявка за HTTP Post).
- GraphQL е строго типизиран и строгите изисквания към документите правят наличните точки от данни прозрачни за клиентските приложения.
- Един недостатък на RESTful крайните точки е, че те изискват много поддръжка, ако структурата на данните на вашата организация се променя често. GraphQL е гъвкав и позволява бързо адаптиране към тези промени, тъй като промените трябва да се обработват само в заявките на GraphQL.
Недостатъците на GraphQL
Въпреки че GraphQL има много предимства, той носи и някои фундаментални проблеми, които могат да нарушат сделката.
- За разлика от RESTful крайните точки, единствената крайна точка на GraphQL няма собствени възможности за кеширане. Ще трябва да настроите своя собствена логика за кеширане.
- Друг проблем е, че всички заявки връщат HTTP 200 отговор, независимо от действителния статус на отговора.
- Настройването на крайна точка на GraphQL може да бъде относително по-сложно от RESTful уеб услуга. Ако вашите структури от данни са относително прости и не изискват постоянни промени, може да си струва да избягвате GraphQL.
Тъй като вече знаете плюсовете и минусите на GraphQL, нека видим най-добрите клиенти на GraphQL за 2020 г.
Съвет: Използвайте Bit (Github), за да споделяте, документирате и управлявате компоненти на React за многократна употреба. Това е чудесен начин да увеличите повторното използване на кода, да ускорите разработката и да създадете приложения с мащаб.
1. Аполо-клиент
Apollo-Client е цялостна JavaScript библиотека, използвана за управление на локални и отдалечени данни с GraphQL. Той има много предимства като управление на състоянието, извличане, кеширане и модифициране на данни на приложението. Той осигурява ефективен и декларативен начин за структуриране на код в съответствие със съвременните процеси на разработка. Apollo-Client има собствена поддръжка за React и се разширява до други слоеве на изглед като Vue и Ember чрез проекти на общността.
Последната версия на Apollo поддържа събиране на отпадъци, съхранение както за нормализирани, така и за ненормализирани данни. Освен това има персонализиране на кеширани данни с TypePolicy и FieldPolicy API.
Примерен код за използване на Apollo-Client в React приложение
Нека инсталираме най-новата версия на клиента Apollo и необходимите пакети:
npm install @apollo/client graphql
Сега създайте компонент с име apolloClient.js. След като всички зависимости бъдат инсталирани, инициализирайте екземпляр на ApolloClient. Започнете с импортиране на ApolloClient и InMemoryCache.
import { ApolloClient, InMemoryCache, gql } from “@apollo/client”;
Сега дефинирайте функция за експортиране по следния начин и добавете следните кодови фрагменти в нея:
Както може би вече сте забелязали, URI е URL адрес на GraphQL сървър, работещ в рамките на CodeSandbox. Сега клиентът е готов да извлече данните.
Дефинирайте низ за заявка, както е показано по-долу. Препоръчително е да импортирате функцията gql, за да анализирате низа на заявката (вече импортиран).
Отворете компонента ApolloClient.js и импортирайте ApolloProvider, както следва, за да го свържете към компонента React.
import { ApolloProvider } from “@apollo/client”;
Добавете следния кодов фрагмент в израза за връщане, както следва:
Сега импортирайте ApolloClientExample в компонента App.js, както следва:
import { ApolloClientExapmle } from “./graphql/apolloClient”;
Добавете следния оператор за връщане:
Това е. Нека да стартираме кода и да проверим отговора в конзолата. Както се вижда на екранната снимка по-долу, вие ще можете да наблюдавате свойство данни с прикачени тарифи, заедно със зареждане и networkStatus.
GraphQL-заявка
GraphQL-Request е известен като Isomorphic, защото работи както с Node, така и с браузъри. Това е минимален GraphQL клиент, поддържащ Node и браузъри за скриптове и прости приложения и включва няколко функции. GraphQL-Request е лек и прост GraphQL клиент, който поддържа async и await. По-важното е, че поддържа Typescript.
Примерен код за използване на GraphQL-Request в React приложение
Нека създадем проста GraphQL заявка. Започнете с инсталиране на най-новата версия на graphql-request с помощта на мениджър на пакети на възли (npm):
npm install graphql-request
Сега създайте файл с име graphqlRequest.js и импортирайте graphql-заявката, както следва:
import request from “graphql-request”;
Вътре в новосъздадения файл добавете функция за експортиране със следната заявка за извличане на данните от филм:
Запишете отговора в конзолата със следния код, за да можем да го проверим:
Добавете следния оператор за връщане, за да завършите компонента.
Импортирайте компонента graphqlRequest.js в компонента App.js и го извикайте по следния начин:
Сега стартирайте приложението и проверете конзолата, за да видите данните от филма в обекта за отговор.
GraphQL-CLI
GraphQL-CLI е малко по-различен от клиентите, които разглеждахме досега. Той е базиран на команден ред и предоставя много полезни инструменти за създаване и управление на приложения, които използват GraphQL. В допълнение към многото команди, които предоставя, за да направи вашите рутинни задачи по-ефективни, ще можете да разширите персонализираните команди чрез добавки. Ярката екосистема на GraphQL-CLI отваря към много ресурси като библиотеки, редактори и IDE.
Интересен факт за GraphQL-CLI е, че той ви позволява да създадете функционираща структура на приложение с пълен стек в рамките на минути с помощта на командата init, както е показано по-долу.
Примерен код за използване на GraphQL-CLI в React приложение
Инсталирайте CLI чрез npm, като използвате интерфейса на командния ред (CMD).
npm install graphql-cli@canary
Нека създадем нов проект с GraphQL-CLI чрез командата init.
graphql init
Следвайте процеса, като отговорите на следните въпроси. Това е, за да отговаря на нашия примерен код. Можете също да изпробвате много други сценарии.
Променете директорията в папката на проекта:
cd Full Stack
Сега инсталирайте съответните зависимости:
yarn install
Променете директорията в папката на проекта, т.е. GraphQL-Project и изпълнете следните действия:
Стартирайте базата данни
docker-compose up -d
Генерирайте ресурси (схема и резолвери) и създайте базата данни
yarn graphql generate — backend
yarn graphql generate -backend
yarn graphql generate — db
Генериране на типове за схема на база данни и преобразуватели
yarn schemats generate
yarn graphql codegen
Стартирайте сървъра
yarn start: server
Генериране на заявки, мутации и абонаменти за проекта от страна на клиента
yarn graphql generate — client
Генерирайте React компоненти
yarn graphql codegen
Стартирайте приложението React
yarn start:client
Ето резултата, който ще видите.
GraphQL-съставяне
GraphQL-Compose е отличен инструментариум за генериране на сложни GraphQL схеми на Node.js. Това е може би най-добрият инструмент за изграждане на генератор на схеми на GraphQL и включва методи за редактиране на типове изход/вход на GraphQL. Въведен е graphql fieldConfigs, който е Resolver, който може да се използва за търсене, актуализиране и изтриване на записи.
GraphQL-Compose предоставя метод за преобразуване на OutputType към InputType и анализатор на проекция от AST. Този клиент предоставя регистър на типове с куп методи за изграждане на програмна схема.
Езикът на схемата GraphQL може да се използва за дефиниране на:
Типове генератори, вградени отгоре:
- GraphQL-Compose-JSON
- GraphQL-Compose-Mongoose
- GraphQL-Compose-ElasticSearch
- GraphQL-Compose-AWS
Помощни добавки:
- GraphQL-Compose-Relay
- GraphQL-Compose-Connection
- GraphQL-Compose-DataLoader
Примерен код за използване на GraphQL-Compose в React приложение
Инсталирайте го чрез npm, както следва:
npm install graphql-compose
Сега импортирайте необходимите модули:
import { schemaComposer } from “graphql-compose”;
Нека създадем някои фиктивни данни - два масива за автори и публикации.
Изграждането на GraphQL схема започва с декларации на сложни типове. Те трябва да бъдат наименувани уникално. Нека създадем два различни типа, както следва:
Сега създайте връзка между тях:
Сега нека изградим схема. Току-що установихме два типа и те са свързани и могат да извличат данни. Сега се препоръчва да инициализирате схемата с помощта на schemaComposer, който се импортира от модула, импортиран по-горе.
Посочете данните, които се изискват в заявката:
Заявките, които променят данни, трябва да бъдат поставени в Mutation.
Вече сме готови да изградим схема, която трябва да бъде предадена на express-graphql:
export const schema = schemaComposer.buildSchema();
Сега нека създадем HTTP сървър. Успешно изградихме схемата; трябва да внедри сървър. Както бе споменато по-горе, нека импортираме express-graphql и неговите необходими зависимости:
Това е. Разработихме приложение, използващо GraphQL-Compose.
@octokit/GraphQL
Това е GitHub GraphQL API клиент за браузъри и Node. Той предоставя няколко предимства, като например:
- Изпращане на прости заявки
- Управление на удостоверяването
- Поддържа заглавки и променливи
- Използва персонализирани екземпляри @octokit/request
Octokit.GraphQL позволява на .Net приложенията да имат достъп до API на GitHub GraphQL, като го излагат като строго въведена езикова интегрирана заявка, която стриктно се придържа към синтаксиса на заявката на GraphQL. Друго важно предимство на тази библиотека е, че позволява на разработчиците да „пишат тестове“ с фиктивни данни, за да тестват своите приложения.
Примерен код за използване на Octokit.GraphQL в React приложение
Инсталирайте чрез npm, както следва:
npm install @octokit/graphql
Сега импортирайте graphql от octokit:
import { graphql } from “@octokit/graphql”;
Изпратете проста заявка със следния код:
Препоръчително е тези заявки да се оторизират чрез заглавка за оторизация. PAT (Personal Access Token) може да бъде получен и използван като ключ в заглавката за оторизация, както е показано по-горе.
PAT може да се генерира чрез https://github.com/settings/tokens
Реле
Relay е друг важен клиент на GraphQL, който е специално създаден за React приложения. Неговият дизайн се фокусира главно върху удобството за потребителя, разширяемостта и производителността. В допълнение към обичайните звънци и свирки, налични с повечето клиенти на GraphQL, Relay подобрява капсулирането, което вече е налично сред компонентите на React.
За пълното разбиране на Relay е необходимо поне основно разбиране на обвързването на данни в React. Релето се конфигурира лесно с един конфигурационен файл чрез пакета relay-config.
Примерен код за използване на Relay в React приложение
Започнете, като инсталирате пакета react-relay чрез npm:
npm install react-relay
Сега създайте компонент с име ReactRelay.js и настройте средата за предаване. Средата обединява заедно конфигурацията, кеш паметта и мрежовата обработка, от които Relay се нуждае, за да работи.
Инсталирайте модула, необходим за конфигуриране на средата:
npm install relay-runtime
Следващата стъпка е да импортирате модула за релейно време, както следва:
import { Environment, Network, RecordSource, Store } from “relay-runtime”;
Това е кодът за функцията за извличане:
Представете заявката, както следва:
Добавете следните конфигурации:
Сега създайте функция за експортиране като ReactRelay, както следва:
export const Example = () => {}
Добавете следния кодов фрагмент в гореспоменатия оператор за връщане.
Отворете файла App.js и импортирайте ReactRelay, както следва:
Това е всичко за този прост пример. Но има много повече, които можете да направите с React Relay.
Заключение
За да разберете напълно GraphQL и неговите предимства, трябва да знаете плюсовете и минусите на RESTful уеб услугите. GraphQL е отлична алтернатива, но има някои сценарии, в които не е подходяща. Разгледахме ги в началото на тази статия.
След като сте установили, че GraphQL може да добави стойност към вашите приложения, следващата стъпка е да идентифицирате GraphQL клиент, който отговаря на езика за програмиране и рамката, които използвате, и което е по-важно, вашите бизнес изисквания.
