Već nekoliko godina pokušavam identificirati okvire, proizvode i usluge koji omogućavaju tehnolozima da zadrže fokus na proširenju vrijednosti svog intelektualnog vlasništva. Ovo je i dalje divno putovanje za mene, ispunjeno jedinstvenim prilikama za učenje.  Inženjer u meni se nedavno zapitao postoji li situacija u kojoj bih mogao pronaći sekundarnu korist za postojeći koncept o kojem sam ranije govorio. Drugim riječima, mogu li identificirati još jednu korist sa istim nivoom utjecaja kao što je prethodno prepoznato originalno roditeljsko rješenje?  Za ovaj članak, htio sam dublje zaroniti u GraphQL da vidim šta mogu pronaći.  U svom članku „   “ govorio sam o tome kako postoje scenariji u stvarnom svijetu kada je GraphQL poželjniji od RESTful usluge. Prošetali smo kroz kako da izgradimo i primenimo GraphQL API koristeći Apollo Server. Kada je vrijeme da se odmori REST  U ovom naknadnom postu planiram da poboljšam svoje znanje o GraphQL-u tako što ću proći kroz pretplate za preuzimanje podataka u realnom vremenu. Također ćemo izgraditi WebSocket servis za korištenje pretplata.  Recap: Customer 360 Use Case  Moj prethodni članak se fokusirao na slučaj upotrebe Customer 360, gdje pokrovitelji mog izmišljenog poslovanja održavaju sljedeće zbirke podataka:  Informacije o kupcima  Podaci o adresi  Kontakt metode  Kreditni atributi  Velika pobjeda u korištenju GraphQL-a je to što jedan zahtjev za GraphQL može dohvatiti sve potrebne podatke za token korisnika (jedinstveni identitet).   type Query { addresses: [Address] address(customer_token: String): Address contacts: [Contact] contact(customer_token: String): Contact customers: [Customer] customer(token: String): Customer credits: [Credit] credit(customer_token: String): Credit }  Korištenje RESTful pristupa za dohvaćanje jednog (360) pogleda korisnika zahtijevalo bi spajanje više zahtjeva i odgovora. GraphQL nam daje rješenje koje radi mnogo bolje.  Ciljevi za podizanje nivoa  Da bi se napredovao u bilo kom aspektu života, potrebno je postići nove ciljeve. Za moje ciljeve ovdje, ovo znači:  Razumijevanje i implementacija prijedloga vrijednosti pretplate unutar GraphQL-a.  Korištenje WebSocket implementacije za korištenje GraphQL pretplate.  Ideja korištenja pretplata preko upita i mutacija unutar GraphQL-a je poželjna metoda kada su ispunjeni sljedeći uvjeti:  Male, inkrementalne promjene na velikim objektima  Ažuriranja u realnom vremenu sa malim kašnjenjem (kao što je aplikacija za ćaskanje)  Ovo je važno jer implementacija pretplata unutar GraphQL-a nije trivijalna. Ne samo da će osnovni server morati da se ažurira, već će i aplikacija koja troši zahtev zahtevati redizajn.  Srećom, slučaj upotrebe koji pratimo s našim primjerom Customer 360 je odličan za pretplate. Također, implementiraćemo WebSocket pristup za iskorištavanje tih pretplata.  Kao i prije, nastavit ću koristiti Apollo i dalje.  Podizanje nivoa uz pretplate  Prvo, moramo instalirati potrebne biblioteke za podršku pretplata na moj Apollo GraphQL server:   npm install ws npm install graphql-ws @graphql-tools/schema npm install graphql-subscriptions  Sa instaliranim stavkama, fokusirao sam se na ažuriranje   iz svog originalnog spremišta kako bih proširio   konstantu sa sljedećim: index.ts typedefs   type Subscription { creditUpdated: Credit }  Također sam uspostavio konstantu za smještaj nove   instance i napravio uzorak pretplate koju ćemo kasnije koristiti: PubSub   const pubsub = new PubSub(); pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: { } });  Očistio sam postojeće rezolvere i dodao novu   za ovaj novi slučaj upotrebe: Subscription   const resolvers = { Query: { addresses: () => addresses, address: (parent, args) => { const customer_token = args.customer_token; return addresses.find(address => address.customer_token === customer_token); }, contacts: () => contacts, contact: (parent, args) => { const customer_token = args.customer_token; return contacts.find(contact => contact.customer_token === customer_token); }, customers: () => customers, customer: (parent, args) => { const token = args.token; return customers.find(customer => customer.token === token); }, credits: () => credits, credit: (parent, args) => { const customer_token = args.customer_token; return credits.find(credit => credit.customer_token === customer_token); } }, Subscription: { creditUpdated: { subscribe: () => pubsub.asyncIterator(['CREDIT_BALANCE_UPDATED']), } } };  Zatim sam refaktorirao konfiguraciju servera i predstavio dizajn pretplate:   const app = express(); const httpServer = createServer(app); const wsServer = new WebSocketServer({ server: httpServer, path: '/graphql' }); const schema = makeExecutableSchema({ typeDefs, resolvers }); const serverCleanup = useServer({ schema }, wsServer); const server = new ApolloServer({ schema, plugins: [ ApolloServerPluginDrainHttpServer({ httpServer }), { async serverWillStart() { return { async drainServer() { serverCleanup.dispose(); } }; } } ], }); await server.start(); app.use('/graphql', cors(), express.json(), expressMiddleware(server, { context: async () => ({ pubsub }) })); const PORT = Number.parseInt(process.env.PORT) || 4000; httpServer.listen(PORT, () => { console.log(`Server is now running on http://localhost:${PORT}/graphql`); console.log(`Subscription is now running on ws://localhost:${PORT}/graphql`); });  Da bih simulirao ažuriranja koja su vođena klijentima, kreirao sam sljedeću metodu za povećanje kreditnog stanja za 50 USD svakih pet sekundi dok je usluga pokrenuta. Kada stanje dostigne (ili premaši) kreditno ograničenje od 10.000 USD, vraćam stanje na 2.500 USD, simulirajući plaćanje salda.   function incrementCreditBalance() { if (credits[0].balance >= credits[0].credit_limit) { credits[0].balance = 0.00; console.log(`Credit balance reset to ${credits[0].balance}`); } else { credits[0].balance += 50.00; console.log(`Credit balance updated to ${credits[0].balance}`); } pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: credits[0] }); setTimeout(incrementCreditBalance, 5000); } incrementCreditBalance();  Cijeli   fajl možete pronaći   . index.ts ovdje  Postavite u Heroku  Pošto je usluga spremna, vrijeme je da implementiramo uslugu kako bismo mogli komunicirati s njom. Budući da je Heroku prošli put odlično funkcionirao (a meni ga je lako koristiti), ostanimo pri tom pristupu.  Za početak, trebao sam pokrenuti sljedeće Heroku CLI komande:   $ heroku login $ heroku create jvc-graphql-server-sub Creating ⬢ jvc-graphql-server-sub... done https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/ | https://git.heroku.com/jvc-graphql-server-sub.git  Komanda je također automatski dodala spremište koje Heroku koristi kao daljinski:   $ git remote heroku origin  Kao što sam napomenuo u svom prethodnom članku, Apollo Server onemogućuje Apollo Explorer u proizvodnim okruženjima. Da bi Apollo Explorer bio dostupan za naše potrebe, morao sam postaviti varijablu okruženja   na razvoj. Postavio sam to sa sljedećom CLI naredbom: NODE_ENV   $ heroku config:set NODE_ENV=development Setting NODE_ENV and restarting ⬢ jvc-graphql-server-sub... done, v3 NODE_ENV: development  Bio sam spreman da postavim svoj kod na Heroku:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Brzi pregled Heroku kontrolne table pokazao je da moj Apollo server radi bez ikakvih problema:  U odjeljku Postavke pronašao sam URL aplikacije Heroku za ovu instancu usluge:   https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/   Imajte na umu – ovaj link više neće biti u upotrebi do trenutka objavljivanja ovog članka.  Za sada bih mogao dodati GraphQL ovom URL-u da pokrenem Apollo Server Studio. Ovo mi omogućava da vidim kako pretplate rade prema očekivanjima:   Obratite pažnju na odgovore pretplate na desnoj strani ekrana.  Podizanje nivoa uz WebSocket Skillz  Možemo iskoristiti   i Heroku-ove mogućnosti da kreiramo implementaciju koja koristi pretplatu koju smo kreirali. podršku za WebSocket  U mom slučaju, kreirao sam index.js fajl sa sledećim sadržajem. U osnovi, ovo je kreiralo WebSocket klijenta i također uspostavilo lažnu HTTP uslugu koju sam mogao koristiti za provjeru da li klijent radi:   import { createClient } from "graphql-ws"; import { WebSocket } from "ws"; import http from "http"; // Create a dummy HTTP server to bind to Heroku's $PORT const PORT = process.env.PORT || 3000; http.createServer((req, res) => res.end('Server is running')).listen(PORT, () => { console.log(`HTTP server running on port ${PORT}`); }); const host_url = process.env.GRAPHQL_SUBSCRIPTION_HOST || 'ws://localhost:4000/graphql'; const client = createClient({ url: host_url, webSocketImpl: WebSocket }); const query = `subscription { creditUpdated { token customer_token credit_limit balance credit_score } }`; function handleCreditUpdated(data) { console.log('Received credit update:', data); } // Subscribe to the creditUpdated subscription client.subscribe( { query, }, { next: (data) => handleCreditUpdated(data.data.creditUpdated), error: (err) => console.error('Subscription error:', err), complete: () => console.log('Subscription complete'), } );  Cijeli   fajl možete pronaći   . index.js ovdje  Ovu jednostavnu Node.js aplikaciju možemo primijeniti i na Heroku, pazeći da postavite varijablu okruženja   na URL Heroku aplikacije koji smo ranije koristili. GRAPHQL_SUBSCRIPTION_HOST  Također sam kreirao sljedeći   da kažem Herokuu kako da pokrene moju aplikaciju: Procfile   web: node src/index.js  Zatim sam kreirao novu Heroku aplikaciju:   $ heroku create jvc-websocket-example Creating ⬢ jvc-websocket-example... done https://jvc-websocket-example-62824c0b1df4.herokuapp.com/ | https://git.heroku.com/jvc-websocket-example.git  Zatim sam postavio varijablu okruženja   da ukazuje na moj pokrenut GraphQL server: GRAPHQL_SUBSCRIPTION_HOST   $ heroku --app jvc-websocket-example \ config:set \ GRAPHQL_SUBSCRIPTION_HOST=ws://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/graphql  U ovom trenutku, spremni smo za implementaciju našeg koda na Heroku:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Kada se WebSocket klijent pokrene, možemo vidjeti njegov status na Heroku kontrolnoj tabli:  Pregledom evidencije unutar Heroku Dashboard-a za   instancu, možemo vidjeti višestruka ažuriranja svojstva   usluge   . U mom demo-u, čak sam uspio uhvatiti slučaj upotrebe u kojem je stanje smanjeno na nulu, simulirajući da je izvršeno plaćanje: jvc-websocket-example balance jvc-graphql-server-sub  U terminalu možemo pristupiti tim istim evidencijama pomoću CLI naredbe heroku logs.   2024-08-28T12:14:48.463846+00:00 app[web.1]: Received credit update: { 2024-08-28T12:14:48.463874+00:00 app[web.1]: token: 'credit-token-1', 2024-08-28T12:14:48.463875+00:00 app[web.1]: customer_token: 'customer-token-1', 2024-08-28T12:14:48.463875+00:00 app[web.1]: credit_limit: 10000, 2024-08-28T12:14:48.463875+00:00 app[web.1]: balance: 9950, 2024-08-28T12:14:48.463876+00:00 app[web.1]: credit_score: 750 2024-08-28T12:14:48.463876+00:00 app[web.1]: }  Ne samo da imamo GraphQL uslugu sa implementacijom pretplate koja je pokrenuta, već sada imamo i WebSocket klijent koji koristi ta ažuriranja.  Zaključak  Moji čitaoci se mogu sjetiti moje lične izjave o misiji, za koju smatram da se može primijeniti na bilo kojeg IT profesionalca:  „Usredsredite svoje vreme na isporuku karakteristika/funkcionalnosti koje proširuju vrednost vašeg intelektualnog vlasništva. Iskoristite okvire, proizvode i usluge za sve ostalo.” — J. Vester  U ovom dubokom zaronu u GraphQL pretplate, uspješno smo iskoristili ažuriranja sa Apollo servera koji radi na Heroku-u koristeći drugu uslugu koja je također pokrenuta na Heroku-u – aplikaciju zasnovanu na Node.js koja koristi WebSockets. Koristeći lagane pretplate, izbjegli smo slanje upita za nepromjenjive podatke, već smo se jednostavno pretplatili na primanje ažuriranja stanja kredita čim se dogode.  U uvodu sam spomenuo traženje principa dodatne vrijednosti unutar teme o kojoj sam ranije pisao. GraphQL pretplate su odličan primjer onoga što sam imao na umu jer omogućava potrošačima da primaju ažuriranja odmah, bez potrebe da postavljaju upite prema izvornim podacima. Ovo će potrošače podataka Customer 360 učiniti veoma uzbuđenim, znajući da mogu uživo ažurirati kako se dogode.  Heroku je još jedan primjer koji nastavlja da se pridržava moje izjave o misiji nudeći platformu koja mi omogućava da brzo prototipiram rješenja koristeći CLI i standardne Git komande. Ovo ne samo da mi daje jednostavan način da prikažem slučaj upotrebe moje pretplate, već i da implementiram korisnika koristeći WebSockets.  Ako ste zainteresovani za izvorni kod za ovaj članak, pogledajte moja spremišta na GitLabu:   graphql-server-customer-subscription   websocket-primjer  Osjećam se samouvjereno kada kažem da sam ovim naporom uspješno poboljšao svoje GraphQL vještine. Ovo putovanje je bilo novo i izazovno za mene… i isto tako zabavno!  Sledeće planiram da zaronim u autentifikaciju, koja će, nadam se, pružiti još jednu priliku da se podignem na nivo sa GraphQL i Apollo serverom. Stay tuned!  Želim vam zaista divan dan!

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

Ovaj audio je proizveden na originalnom jeziku priče!

Predugo; Citati

Poboljšavam svoje GraphQL vještine: Pretplate u realnom vremenu

Poboljšavam svoje GraphQL vještine: Pretplate u realnom vremenu

About Author

KOMENTARI

HANG TAGS

OVAJ ČLANAK JE PREDSTAVLJEN U

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps