Desde hai uns anos, tentei identificar marcos, produtos e servizos que permitan aos tecnólogos manter o seu foco en ampliar o valor da súa propiedade intelectual. Esta segue a ser unha viaxe marabillosa para min, chea de oportunidades únicas de aprendizaxe.  O enxeñeiro en min preguntouse recentemente se había unha situación na que puidese atopar un beneficio secundario para un concepto existente do que xa falei antes. Noutras palabras, podería identificar outro beneficio co mesmo nivel de impacto que a solución principal orixinal previamente recoñecida?  Para este artigo, quería mergullarme máis en GraphQL para ver o que podía atopar.  No meu artigo "   ", falei sobre como hai escenarios do mundo real nos que GraphQL é preferible a un servizo RESTful. Explicamos como crear e implementar unha API GraphQL usando Apollo Server. Cando é hora de dar un descanso a REST  Nesta publicación de seguimento, planeo aumentar o meu coñecemento de GraphQL percorrendo subscricións para recuperar datos en tempo real. Tamén crearemos un servizo WebSocket para consumir as subscricións.  Resumo: Caso de uso do cliente 360  O meu artigo anterior céntrase nun caso de uso de Customer 360, onde os usuarios da miña empresa ficticia manteñen as seguintes coleccións de datos:  Información do cliente  Información do enderezo  Métodos de contacto  Atributos do crédito  Unha gran vitoria ao usar GraphQL é que unha única solicitude de GraphQL pode recuperar todos os datos necesarios para o token dun cliente (identidade única).   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 }  Usar un enfoque RESTful para recuperar a vista única (360) do cliente sería necesario unir varias solicitudes e respostas. GraphQL ofrécenos unha solución que funciona moito mellor.  Obxectivos para subir de nivel  Para subir de nivel en calquera aspecto da vida, hai que acadar novos obxectivos. Para os meus propios obxectivos aquí, isto significa:  Comprensión e implementación da proposta de valor da subscrición dentro de GraphQL.  Usando unha implementación de WebSocket para consumir unha subscrición GraphQL.  A idea de usar subscricións sobre consultas e mutacións dentro de GraphQL é o método preferido cando se cumpren as seguintes condicións:  Cambios pequenos e incrementais en obxectos grandes  Actualizacións en tempo real de baixa latencia (como unha aplicación de chat)  Isto é importante xa que implementar subscricións dentro de GraphQL non é trivial. Non só será necesario actualizar o servidor subxacente, senón que a aplicación consumidora tamén requirirá un novo deseño.  Afortunadamente, o caso de uso que estamos a buscar co noso exemplo de Customer 360 é ideal para as subscricións. Ademais, implementaremos un enfoque WebSocket para aproveitar esas subscricións.  Como antes, seguirei usando Apollo no futuro.  Sube de nivel coas subscricións Creds  En primeiro lugar, necesitamos instalar as bibliotecas necesarias para admitir subscricións co meu servidor Apollo GraphQL:   npm install ws npm install graphql-ws @graphql-tools/schema npm install graphql-subscriptions  Con eses elementos instalados, centreime en actualizar o   do meu repositorio orixinal para estender a constante   co seguinte: index.ts typedefs   type Subscription { creditUpdated: Credit }  Tamén establecín unha constante para albergar unha nova instancia   e creei unha subscrición de mostra que usaremos máis tarde: PubSub   const pubsub = new PubSub(); pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: { } });  Limpei os resolutores existentes e engadín unha nova   para este novo caso de uso: 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']), } } };  Despois refactorei a configuración do servidor e introducín o deseño da subscrición:   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`); });  Para simular actualizacións dirixidas ao cliente, creei o seguinte método para aumentar o saldo de crédito en 50 dólares cada cinco segundos mentres o servizo está funcionando. Unha vez que o saldo alcance (ou supere) o límite de crédito de 10.000 USD, restablezo o saldo a 2.500 USD, simulando que se está a realizar o pago do saldo.   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();  O ficheiro   completo pódese atopar   . index.ts aquí  Implementar en Heroku  Co servizo listo, é hora de implementar o servizo para que poidamos interactuar con el. Dado que Heroku funcionou moi ben a última vez (e é fácil de usar para min), imos seguir con ese enfoque.  Para comezar, necesitaba executar os seguintes comandos da CLI de Heroku:   $ 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  O comando tamén engadiu automaticamente o repositorio usado por Heroku como control remoto:   $ git remote heroku origin  Como indiquei no meu artigo anterior, Apollo Server desactiva Apollo Explorer en ambientes de produción. Para manter o Apollo Explorer dispoñible para as nosas necesidades, necesitaba establecer a variable de ambiente   en desenvolvemento. Configurei iso co seguinte comando CLI: NODE_ENV   $ heroku config:set NODE_ENV=development Setting NODE_ENV and restarting ⬢ jvc-graphql-server-sub... done, v3 NODE_ENV: development  Estaba preparado para implementar o meu código en Heroku:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Unha vista rápida do panel de control de Heroku mostrou que o meu servidor Apollo funcionaba sen problemas:  Na sección Configuración, atopei o URL da aplicación Heroku para esta instancia de servizo:   https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/   Teña en conta que esta ligazón deixará de estar en servizo no momento en que se publique este artigo.  Polo momento, podería engadir GraphQL a este URL para lanzar Apollo Server Studio. Isto permíteme ver as subscricións funcionando como se esperaba:   Observe as respostas de subscrición no lado dereito da pantalla.  Sube de nivel con WebSocket Skillz  Podemos aproveitar   e as capacidades de Heroku para crear unha implementación que consuma a subscrición que creamos. o soporte de WebSocket  No meu caso, creei un ficheiro index.js co seguinte contido. Basicamente, isto creou un cliente WebSocket e tamén estableceu un servizo HTTP ficticio que podería usar para validar que o cliente estaba en execución:   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'), } );  O ficheiro   completo pódese atopar   . index.js aquí  Tamén podemos implementar esta sinxela aplicación Node.js en Heroku, asegurándonos de establecer a variable de ambiente   no URL da aplicación Heroku que usamos anteriormente. GRAPHQL_SUBSCRIPTION_HOST  Tamén creei o seguinte   para dicirlle a Heroku como iniciar a miña aplicación: Procfile   web: node src/index.js  A continuación, creei unha nova aplicación Heroku:   $ 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  A continuación, configure a variable de ambiente   para que apunte ao meu servidor GraphQL en execución: GRAPHQL_SUBSCRIPTION_HOST   $ heroku --app jvc-websocket-example \ config:set \ GRAPHQL_SUBSCRIPTION_HOST=ws://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/graphql  Neste punto, estamos preparados para implementar o noso código en Heroku:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Unha vez que se inicie o cliente WebSocket, podemos ver o seu estado no panel Heroku:  Ao ver os rexistros no panel de control de Heroku para a instancia de   , podemos ver as múltiples actualizacións da propiedade   do servizo   . Na miña demostración, incluso puiden capturar o caso de uso onde o saldo se reduciu a cero, simulando que se fixo un pago: jvc-websocket-example balance jvc-graphql-server-sub  No terminal, podemos acceder a eses mesmos rexistros co comando CLI rexistros heroku.   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]: }  Non só temos un servizo GraphQL cunha implementación de subscrición en execución, senón que agora temos un cliente WebSocket que consume esas actualizacións.  Conclusión  Os meus lectores poden lembrar a miña declaración de misión persoal, que creo que se pode aplicar a calquera profesional de TI:  "Concentra o teu tempo en ofrecer funcións/funcionalidades que amplían o valor da túa propiedade intelectual. Aproveita marcos, produtos e servizos para todo o demais". - J. Vester  Neste mergullo profundo nas subscricións de GraphQL, consumimos con éxito as actualizacións dun servidor Apollo que se executa en Heroku mediante outro servizo que tamén se executa en Heroku: unha aplicación baseada en Node.js que usa WebSockets. Ao aproveitar as subscricións lixeiras, evitamos enviar consultas sobre datos invariables, pero simplemente subscribimos para recibir actualizacións do saldo de crédito a medida que se producían.  Na introdución, mencionei buscar un principio de valor adicional dentro dun tema sobre o que escribín antes. As subscricións de GraphQL son un excelente exemplo do que tiña en mente porque permite aos consumidores recibir actualizacións inmediatamente, sen necesidade de facer consultas cos datos de orixe. Isto fará que os consumidores dos datos de Customer 360 estean moi entusiasmados, sabendo que poden actualizar as actualizacións en directo.  Heroku é outro exemplo que segue cumprindo a miña declaración de misión ofrecendo unha plataforma que me permite prototipar rapidamente solucións usando CLI e comandos Git estándar. Isto non só me dá un xeito sinxelo de mostrar o caso de uso da miña subscrición, senón de implementar un consumidor mediante WebSockets.  Se estás interesado no código fonte deste artigo, consulta os meus repositorios en GitLab:   graphql-server-customer-subscription   websocket-exemplo  Síntome seguro cando digo que subín de nivel as miñas habilidades de GraphQL con este esforzo. Esta viaxe foi nova e desafiante para min... e tamén moi divertida!  A continuación planeo mergullarme na autenticación, que esperamos que ofreza outra oportunidade para subir de nivel con GraphQL e Apollo Server. Estade atentos!  Que teñades un gran día!

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

Este audio está producido na lingua orixinal da historia!

Demasiado longo; Ler

Make resilience your competitive advantage

Aumentando de nivel as miñas habilidades de GraphQL: subscricións en tempo real

Aumentando de nivel as miñas habilidades de GraphQL: subscricións en tempo real

About Author

COMENTARIOS

Etiquetas colgantes

ESTE ARTIGO FOI PRESENTADO EN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Society Community!

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our Web3 Community!

HackerNoon Decoded 2024: Celebrating Our Society Community!

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our Web3 Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps