Jichhax mä qawqha maranakaw marcos, productos ukat servicios ukanakar uñt’ayañ yant’awayta, ukax tecnólogos ukanakarux propiedad intelectual ukan valoracionap jilxatayañanx ch’amanchañapatakiw yanapt’i. Akax nayatakix mä suma thakhiw sarantaskakiwa, jan uñt’at yatiqañ utanakamp phuqt’ata.  Nayan ingenierox jichhakiw jiskt’asiwayi, mä situación utjiti kawkhantix mä secundario beneficio jikxatañax mä utjki uka concepto ukatakix nayraqat arsuwayta. Mä arunxa, ¿yaqha askinak uñt’ayasmati, ukax pachpa nivel de impacto ukampiw uñt’ayasispa, kunjamatix nayrax awk taykan solución original uñt’atäki ukhama?  Aka qillqatatakix GraphQL ukar juk’amp manqhar ch’allt’añ munta, kuntix jikxatkta uk uñjañataki.  Nayan “   ” qillqatanx kunjams chiqpach pachan escenarios ukanakax utji kunapachatix GraphQL ukax mä servicio RESTful ukar sipanx juk’amp askiwa uka tuqitw arsuwayta. Kunjams mä GraphQL API lurañax ukat uñstayañax Apollo Server uka apnaqañ tuqitw sarnaqapxta. Kunapachatix REST ukar samart’añ pachax purinxi  Aka arktañ post ukanx GraphQL ukan yatiñanakax nivelar uñt’ayañ amtasta, suscripciones ukan sarnaqasa, chiqpach pachan yatiyawinak apsuñataki. Ukhamarakiw mä WebSocket servicio lurañäni, suscripciones ukanakar manq’añataki.  Recap: Cliente 360 Uñstayaña Caso  Nayrir qillqatajax mä Customer 360 apnaqañ tuqitw uñt’ayasi, kawkhantix patrones de mi negocio ficcional ukax aka datos apthapiwinak uñjapxi:  Clientenakan yatiyawipa  Dirección ukan yatiyawipa  Uñt’ayasiñ thakhinaka  Atributos de crédito ukanaka  Mä jach’a atipt’awix GraphQL apnaqañanx mä sapa GraphQL mayiwix taqi kunatix wakiski ukanak mä aljirin token (identidad única) ukatak apsuñapawa.   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 }  Mä RESTful uñakipañampi apnaqañaxa mä sapa (360) uñjawi aljiriru apsuñatakixa walja mayiwinakampi jaysawinakampi ch’ukuñawa wakisispa. GraphQL ukax mä solución ukaw juk’amp suma irnaqañapatak churarakistu.  Nivel Up amtanaka  Kawkïr jakäwins nivelar puriñatakikix machaq amtanakaruw puriñapa. Nayan pachpa amtanakajatakix akanx akax akham sañ muni:  GraphQL ukan suscripción valor propuesta ukar amuyaña ukat phuqhaña.  Mä WebSocket phuqhawi apnaqaña mä GraphQL suscripción manq’añataki.  GraphQL ukan jiskt’awinaka ukat mutaciones ukanakat suscripciones apnaqañax wali askiwa, kunawsatix aka condiciones ukanakax phuqhatäki ukhaxa:  Jisk’a, jilxatir mayjt’awinaka jach’a yänakaru  Pisi latencia, chiqpach pachan machaq uñstawinaka (kunjamakitix mä aplicación de chat) .  Ukax wali askiw kunatix GraphQL ukan suscripciones ukar phuqhañax janiw jisk’akïkiti. Janiw servidor subyacente ukakix machaqar tukuyañakiti, jan ukasti aplicación consumidor ukax mä juk’a rediseño ukhamarakiw munasini.  Wali askiwa, caso de uso ukax jiwasan Cliente 360 uñacht’äwimp arktasktan ukax suscripciones ukanakatakix wali askiwa. Ukhamaraki, mä WebSocket uñakipañ phuqhachañäni uka suscripciones ukanakar aprovechañataki.  Kunjamatix nayrjax ukhamarakiw nayrar sartasax Apolo apnaqañax sarantaskakini.  Nivelación Ukax Suscripciones Creds ukampiw lurasi  Nayraqatxa, Apollo GraphQL servidor ukamp suscripciones ukar yanapt’añatakix wakiskir bibliotecas ukanakaw utt’ayañasa:   npm install ws npm install graphql-ws @graphql-tools/schema npm install graphql-subscriptions  Uka yänakax utt’ayatawa, nayax   ukar nayrïr imañ utat machaqar tukuyañaruw ch’amanchawayta, ukhamat   constante ukar jilxatayañataki: index.ts typedefs   type Subscription { creditUpdated: Credit }  Ukhamarakiw mä constante uñstayawaytxa mä machaq instancia   ukar uñstayañataki ukatx mä suscripción de muestra ukham lurawayta ukax qhipat apnaqañäni: PubSub   const pubsub = new PubSub(); pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: { } });  Nayax utjki uka askichirinakaruw q’umachawayta ukatx mä machaq   ukaruw yapxatta aka machaq apnaqañ tuqitxa: 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']), } } };  Ukatx configuración de servidor ukar refactorizawayta ukatx diseño de suscripción ukar uñt’ayawayta:   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`); });  Cliente-driven actualizaciones ukar uñtasit lurañatakix aka lurawiw lurawayta, ukhamat saldo de crédito ukax sapa phisqa segundos ukjat 50 dólares ukjam jilxatayañataki, kunawsatix servicio ukax apnaqaski ukhaxa. Mä kutix saldox 10.000 dólares límite de crédito ukar purinxi (jan ukax jilt’ki) ukhax saldox 2.500 dólares ukjaruw kutt’ayawayta, mä saldo payllañ luraskir uñtasita.   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();    ukan phuqhat qillqatapax akan   . index.ts jikxatasi  Heroku ukar uñt’ayaña  Servicio wakicht’ata, jiwasatakix servicio ukar uñstayañ pachaw purini ukhamat ukampi chikt’atäñasataki. Kunjamakitix Herokux qhipa kutix wali sum irnaqawayi (ukat nayatakix apnaqañax jasakiwa), uka jak’achasiwimp chikachasiñäni.  Qalltañatakix aka Heroku CLI kamachinak apnaqañaw wakisïna:   $ 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  Ukhamaraki kamachix Heroku ukan apnaqat imañ utarux mä remote ukham automáticamente yapxataraki:   $ git remote heroku origin  Kunjamtix nayrïr qillqatanx sisktxa, Apollo Server ukax Apollo Explorer ukarux lurañ utanakanx jan ch’amanchatawa. Apollo Explorer ukax jiwasan munañanakasatak utjañapatakix,   medio ambiente variable ukax desarrollo ukar uñt’ayañaw wakisïna. Nayax ukax aka CLI kamachimpiw utt’ayawayta: NODE_ENV   $ heroku config:set NODE_ENV=development Setting NODE_ENV and restarting ⬢ jvc-graphql-server-sub... done, v3 NODE_ENV: development  Nayax Heroku ukar código ukar uñstayañatak wakicht’atäyätwa:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Heroku Dashboard ukan jank’ak uñakipañax Apollo Server ukan jan kuna jan walt’äwinakamp apnaqañ uñacht’ayi:  Configuración uksanx, Heroku app URL ukax aka servicio instancia ukatakix jikxatawayta:   https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/   Uñt’apxañani – aka link ukax janiw servicio ukan utjxaniti kunawsatix aka qillqatax uñt’ayaskani ukhaxa.  Jichhakamax GraphQL ukax aka URL ukaruw yapxataspa Apollo Server Studio ukar uñstayañataki. Ukax suscripciones ukanakax kunjamtix suyapkta ukhamarjam irnaqapki uk uñjañ yanapt’itu:   Pantalla ch’iqa tuqin Suscripción ukan jaysäwinakap uñjañäni.  Nivelación ukax WebSocket Skillz ukampiw lurasi  Jiwasax   ukhamarak Heroku ukan ch’amanchawip apnaqaraksnawa, mä phuqhach lurañataki, ukax lurat suscripción ukar tukusiñapataki. WebSocket ukan yanapt’awip  Nayan amuyujax mä index.js qillqat lurawayta aka qillqatanakampi. Jilpachax, akax mä WebSocket cliente lurawayi ukatx mä servicio HTTP simulado ukham utt’ayawayi ukax nayax apnaqañjamawa cliente ukax apnaqaski uk chiqanchañataki:   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'), } );    ukan phuqhat qillqatapax akan   . index.js jikxatasi  Aka sapuru Node.js apnaqawix Heroku ukarux uñt’ayaraksnawa,   ukan pacha mayjt’awip Heroku apnaqäw URL ukar nayraqat apnaqapktan ukaruw uñt’ayañasa. GRAPHQL_SUBSCRIPTION_HOST  Ukhamarakiw aka   lurawayta, Heroku kunjams app qalltañax uk yatiyañataki: Procfile   web: node src/index.js  Ukxarusti, mä machaq Heroku app lurawayta:   $ 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  Ukatxa, nayax   medio ambiente variable ukar uñt’ayawayta, ukax nayan apnaqat GraphQL servidor ukar uñacht’ayañataki: GRAPHQL_SUBSCRIPTION_HOST   $ heroku --app jvc-websocket-example \ config:set \ GRAPHQL_SUBSCRIPTION_HOST=ws://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/graphql  Aka pachanx, Heroku ukar jiwasan código ukar uñstayañatak wakicht’atätanwa:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Mä kutix WebSocket cliente ukax qalltawayxi ukhax Heroku Dashboard ukan estadop uñjaraksnawa:  Heroku Dashboard ukan registros uñakipt’asax   instance ukatakix walja machaq lurawinakaw   servicio ukan   propiedad ukar uñjaraksna. Nayan demostración ukanx juk’ampirus caso de uso ukarux katjañ atipxta, kawkhantix saldox cero ukar jisk’achatäki, mä payllaw luratäkaspas ukham uñtasita: jvc-websocket-example jvc-graphql-server-sub balance  Terminal ukanxa, uka pachpa qillqatanakaruxa CLI kamachi heroku qillqatanakampiwa mantaraksna.   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]: }  Janiw mä GraphQL servicio ukakikiti mä suscripción implementación ukax apnaqaski, jan ukasti jichhax mä cliente WebSocket uka machaq lurawinakat manq’aski.  Tukuyawi  Uñakipirinakajax declaración de misión personal ukar amtapxaspawa, ukax kawkir profesional IT ukanakatakis apnaqasispa sasaw amuyasta:  “Tiempomx características/funcionalidades ukanakar puriyañatakiw ch’amanchañama, ukax propiedad intelectual ukan valorap jilxatayañataki. Marcos, productos ukat servicios ukanakax taqi kunanak aprovechaña”. — J. Vester sat jilata  Aka manqhankir GraphQL suscripciones ukar ch’amanchañanxa, mä Apollo Server ukan Heroku ukan irnaqatapat machaq lurawinakatx sum manq’antapxta, yaqha servicio ukamp apnaqasa, ukax Heroku ukan apnaqatarakiwa —mä Node.js ukan uñt’ayat aplicación ukax WebSockets ukan apnaqatawa. Suscripciones ligeros ukanakamp aprovechasax, jan mayjt’ir datos ukanakatak jiskt’äwinak jan apayanipxtwa jan ukasti saldo de crédito ukan machaq uñstawinakap katuqañatakikiw suscribirïta.  Qalltäwinx mä tema ukanx mä principio de valor adicional ukar thaqhañatw arsuwayta, ukax nayrax qillqt’atawa. GraphQL suscripciones ukax mä suma uñacht’awiwa kunatix nayax amuyujan utjkitu kunatix ukax aljirinakaruw jank’ak machaq uñstawinak katuqañapatak jayti, jan jiskt’äwinak lurañax wakiskiti fuente de datos ukar uñtasita. Ukax Cliente 360 ukan yatiyawinakap apnaqirinakaruw wali kusisiyani, jupanakax yatipxañapawa kunatix jupanakax machaq uñstawinak kunjamtix luraski ukhamarjamaw jakasipxaspa.  Heroku ukax yaqha uñacht’awiwa, ukax nayan misión ukarjam phuqhaskakiwa, mä plataforma uñacht’ayasa, ukax CLI ukat Git kamachinak estándar ukanakamp jank’ak prototipo solucionanak lurañ yanapt’itu. Ukax janiw mä jasak thakhi suscripción ukan apnaqawip uñacht’ayañakikiti jan ukasti mä consumidor WebSockets apnaqañamp phuqhañataki.  Aka qillqatan código fuente ukar munassta ukhax GitLab ukan imañ utanakax uñakipt’añäni:   graphql-servidor-cliente-suscripción ukax mä juk’a pachanakanwa   websocket-uñacht’awi  Nayax kunapachatix GraphQL yatiñanakax aka ch’amanchawimp sum nivelar puriwayta sasin sista ukhax jan axsarasaw jikxatastxa. Aka saräwix nayatakix machaq ukhamarak ch’amäkanwa ... ukat wali kusiskañarakïnwa!  Nayax jutïrin autenticación ukar ch’allt’añ amtasta, ukax yaqha oportunidad ukaw GraphQL ukat Apollo Server ukanakamp nivelar puriñapatak utjani sasaw suyt’askta. ¡Uñt'apxañani!  ¡Chiqpachansa mä jachʼa uru!

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

¡Aka audiox sarnaqäwin nayrïr arut luratawa!

Sinti jaya pachanakawa; Uñxatt’añataki

GraphQL Yatiñanakaj Nivelar: Chiqpach Tiempo Suscripciones

GraphQL Yatiñanakaj Nivelar: Chiqpach Tiempo Suscripciones

About Author

AKHAM LURASMA

HANG TAGS ukax mä juk’a pachanakanwa

AKA ARTÍCULO UKHAMARAKI UKHAMARAKI

Related Stories

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Your Most Frequently Asked HackerNoon Questions, answered by a Shakespearean Bot

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps