{"id":1042,"date":"2020-04-12T10:48:27","date_gmt":"2020-04-12T09:48:27","guid":{"rendered":"https:\/\/www.muratyaman.co.uk\/wp\/?p=1042"},"modified":"2020-04-12T12:13:31","modified_gmt":"2020-04-12T11:13:31","slug":"graphql-services-using-node-and-apollo","status":"publish","type":"post","link":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/2020\/04\/graphql-services-using-node-and-apollo\/","title":{"rendered":"GraphQL Services using Node and Apollo"},"content":{"rendered":"

I have prepared 2 repos to implement FakeBank using GraphQL<\/a>:<\/p>\n

1. JavaScript: https:\/\/github.com\/muratyaman\/fakebank-js<\/a><\/p>\n

2. TypeScript: https:\/\/github.com\/muratyaman\/fakebank-ts<\/a><\/p>\n

Architecture can be like this:<\/p>\n

\"\"<\/p>\n

FakeBank uses:<\/p>\n

* GraphQL
\n– https:\/\/graphql.org\/<\/a>
\n– “GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.”<\/p>\n

* GraphQL-JS
\n– https:\/\/github.com\/graphql\/graphql-js<\/a>
\n– “A reference implementation of GraphQL for JavaScript”<\/p>\n

* Apollo Server
\n– https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-server<\/a>
\n– “Apollo Server is an open-source, spec-compliant GraphQL server that’s compatible with any GraphQL client”<\/p>\n

* Apollo Federation
\n– https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-federation<\/a>
\n– “… expose a single data graph that provides a unified interface for querying all of your backing data sources”<\/p>\n

* Apollo REST Data Source
\n– https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-datasource-rest<\/a>
\n– “This package exports a (RESTDataSource) class which is used for fetching data from a REST API and exposing it via GraphQL within Apollo Server.”<\/p>\n

* Apollo Gateway
\n– https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-gateway<\/a>
\n– sits above other GraphQL services<\/p>\n

* GraphQL DataLoader
\n– https:\/\/github.com\/graphql\/dataloader<\/a>
\n– “DataLoader is a generic utility to be used as part of your application’s data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.”
\n– improves performance of GraphQL service<\/p>\n

* Express
\n– https:\/\/github.com\/expressjs\/express\/<\/a>
\n– “Fast, unopinionated, minimalist web framework for node”
\n– helps create an HTTP service quickly<\/p>\n

* Faker
\n– https:\/\/github.com\/marak\/Faker.js\/<\/a>
\n– “generate massive amounts of realistic fake data in Node.js and the browser”
\n– helps create random\/mock data<\/p>\n

* Lerna
\n– https:\/\/github.com\/lerna\/lerna<\/a>
\n– “A tool for managing JavaScript projects with multiple packages.”<\/p>\n

## List of core REST services<\/strong><\/p>\n

* rest-auth
\n– http:\/\/localhost:10111
\n– manages login actions, user records<\/p>\n

* rest-accounts
\n– http:\/\/localhost:10222
\n– manages bank accounts and transactions<\/p>\n

* rest-payments
\n– http:\/\/localhost:10333
\n– manages money transfers<\/p>\n

## List of GraphQL services using Core REST services<\/strong><\/p>\n

* gql-fed-auth
\n– http:\/\/localhost:20111
\n– uses rest-auth<\/p>\n

* gql-fed-accounts
\n– http:\/\/localhost:20222
\n– uses rest-accounts<\/p>\n

* gql-fed-payments
\n– http:\/\/localhost:20333
\n– uses rest-payments<\/p>\n

## Standard GraphQL service using Core REST services<\/strong><\/p>\n

* gql-standard
\n– http:\/\/localhost:30111
\n– uses rest-auth
\n– uses rest-accounts
\n– uses rest-payments<\/p>\n

\"\"<\/p>\n

## GraphQL Gateway service<\/strong><\/p>\n

* gql-gateway
\n– http:\/\/localhost:40111
\n– uses gql-fed-auth
\n– uses gql-fed-accounts
\n– uses gql-fed-payments<\/p>\n

\"\"<\/p>\n

## Sequence diagrams<\/strong><\/p>\n

To see the diagrams, use https:\/\/sequencediagram.org\/<\/a><\/p>\n

### A. GraphQL Standard<\/strong><\/p>\n

\"\"<\/p>\n


\ntitle Fake Bank APIs with GraphQL Standard
\napp->api-gateway: request
\napi-gateway->gql-standard: request
\ngql-standard --> rest-X: request a
\nrest-X -> db-X: select data a
\nrest-X <- db-X: records a\ngql-standard <- rest-X: response a\ngql-standard --> rest-Y: request b
\nrest-Y -> db-Y: select data b
\nrest-Y <- db-Y: records b\ngql-standard <- rest-Y: response b\napi-gateway <- gql-standard: response\napp <- api-gateway: response\n<\/code><\/p>\n

### B. GraphQL Gateway<\/strong><\/p>\n

\"\"<\/p>\n


\ntitle Fake Bank APIs with GrapQL Gateway<\/p>\n

app->api-gateway: request
\napi-gateway->gql-gateway: request<\/p>\n

gql-gateway --> gql-fed-X: request a
\ngql-fed-X -> rest-X: request a
\nrest-X -> db-X: select data a
\nrest-X <- db-X: records a\ngql-fed-X <- rest-X: response a\ngql-gateway <- gql-fed-X: response a\n\ngql-gateway --> gql-fed-Y: request b
\ngql-fed-Y -> rest-Y: request b
\nrest-Y -> db-Y: select data b
\nrest-Y <- db-Y: records b\ngql-fed-Y <- rest-Y: response b\ngql-gateway <- gql-fed-Y: response b\n\napi-gateway <- gql-gateway: response\napp <- api-gateway: response\n<\/code><\/p>\n

## Installation<\/strong><\/p>\n

Install yarn and lerna globally<\/p>\n


\nnpm i -g yarn lerna
\n<\/code><\/p>\n

Install dependencies for all packages in this codebase.<\/p>\n


\nlerna bootstrap
\n<\/code><\/p>\n

## Build<\/strong><\/p>\n


\nlerna run build
\n<\/code><\/p>\n

## Start in production mode<\/strong><\/p>\n

Run these in separate terminals in this order:<\/p>\n

## Core REST services<\/strong><\/p>\n

Random\/fake data is generated at runtime<\/p>\n


\nlerna run start:prod --scope=@fakebank\/rest-auth
\nlerna run start:prod --scope=@fakebank\/rest-accounts
\nlerna run start:prod --scope=@fakebank\/rest-payments
\n<\/code><\/p>\n

## GraphQL Services<\/strong><\/p>\n

These services are used by GraphQL Gateway<\/p>\n


\nlerna run start:prod --scope=@fakebank\/gql-fed-auth
\nlerna run start:prod --scope=@fakebank\/gql-fed-accounts
\nlerna run start:prod --scope=@fakebank\/gql-fed-payments
\nlerna run start:prod --scope=@fakebank\/gql-gateway
\n<\/code><\/p>\n

## Standard GrapQL service<\/strong><\/p>\n

We can use RESTful services directly<\/p>\n


\nlerna run start --scope=@fakebank\/gql-standard
\n<\/code><\/p>\n

Note: Another way to run a service:<\/p>\n


\ncd packages\/core-auth
\nyarn start:prod
\n<\/code><\/p>\n

On the next post, I will discuss the details of GraphQL federation: Federation of GraphQL Services using Apollo Gateway<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

I have prepared 2 repos to implement FakeBank using GraphQL: 1. JavaScript: https:\/\/github.com\/muratyaman\/fakebank-js 2. TypeScript: https:\/\/github.com\/muratyaman\/fakebank-ts Architecture can be like this: FakeBank uses: * GraphQL – https:\/\/graphql.org\/ – “GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.” * GraphQL-JS – https:\/\/github.com\/graphql\/graphql-js – “A reference implementation of GraphQL for JavaScript” * Apollo Server – https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-server – “Apollo Server is an open-source, spec-compliant GraphQL server that’s compatible with any GraphQL client” * Apollo Federation – https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-federation – “… expose a single data graph that provides a unified interface for querying all of your backing data sources” * Apollo REST Data Source – https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-datasource-rest – “This package exports a (RESTDataSource) class which is used for fetching data from a REST API and exposing it via GraphQL within Apollo Server.” * Apollo Gateway – https:\/\/github.com\/apollographql\/apollo-server\/tree\/master\/packages\/apollo-gateway – sits above other GraphQL services * GraphQL DataLoader – https:\/\/github.com\/graphql\/dataloader – “DataLoader is a generic utility to be used as part of your application’s data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.” – improves performance of GraphQL service * Express – https:\/\/github.com\/expressjs\/express\/ – “Fast, unopinionated, minimalist web framework for node” – helps create an HTTP service quickly * Faker – https:\/\/github.com\/marak\/Faker.js\/ – “generate massive amounts of realistic fake data in Node.js and the browser” – helps create random\/mock data * Lerna – https:\/\/github.com\/lerna\/lerna – “A tool for managing JavaScript projects with multiple packages.” ## List of core REST services * rest-auth – http:\/\/localhost:10111 – manages login actions, user records * rest-accounts – http:\/\/localhost:10222 – manages bank accounts and transactions * rest-payments – http:\/\/localhost:10333 – manages money transfers ## List of GraphQL services using Core REST services * gql-fed-auth – http:\/\/localhost:20111 – uses rest-auth * gql-fed-accounts – http:\/\/localhost:20222 – uses rest-accounts * gql-fed-payments – http:\/\/localhost:20333 – uses rest-payments ## Standard GraphQL service using Core REST services * gql-standard – http:\/\/localhost:30111 – uses rest-auth – uses rest-accounts – uses rest-payments ## GraphQL Gateway service * gql-gateway – http:\/\/localhost:40111 – uses gql-fed-auth – uses gql-fed-accounts – uses gql-fed-payments ## Sequence diagrams To see the diagrams, use https:\/\/sequencediagram.org\/ ### A. GraphQL Standard title Fake Bank APIs with GraphQL Standard app->api-gateway: request api-gateway->gql-standard: request gql-standard –> rest-X: request a rest-X -> db-X: select data a rest-X db-Y: select data b rest-Y rest-X: request a rest-X -> db-X: select data a rest-X db-Y: select data b rest-Y<\/p>\n","protected":false},"author":2,"featured_media":1049,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[200,93,166,201],"class_list":["post-1042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-graphql","tag-javascript","tag-node","tag-typescript"],"_links":{"self":[{"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1042"}],"version-history":[{"count":6,"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1042\/revisions"}],"predecessor-version":[{"id":1057,"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1042\/revisions\/1057"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/media\/1049"}],"wp:attachment":[{"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.muratyaman.co.uk\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}