Nandritra ny taona vitsivitsy izao, nanandrana namaritra rafitra, vokatra ary serivisy aho izay ahafahan'ny teknolojia mitazona ny fifantohany amin'ny fanitarana ny sandan'ny fananany ara-tsaina. Mitohy ho dia mahafinaritra ho ahy izany, feno fahafahana hianatra tsy manam-paharoa.  Nanontany tena ilay injeniera tato amiko vao haingana raha toa ka misy toe-javatra ahafahako mahita tombony faharoa amin'ny foto-kevitra efa noresahiko teo aloha. Raha lazaina amin'ny teny hafa, azoko atao ve ny hamantatra tombontsoa hafa mitovy amin'ny haavon'ny fiantraikany amin'ny vahaolana amin'ny ray aman-dreny tany am-boalohany efa nekena teo aloha?  Ho an'ity lahatsoratra ity, te-hiditra lalindalina kokoa amin'ny GraphQL aho hahitana izay hitako.  Ao amin'ny lahatsoratro "   " dia niresaka momba ny fisian'ny toe-javatra tena misy eo amin'izao tontolo izao aho raha ny GraphQL no tiana kokoa noho ny serivisy RESTful. Nandeha tamin'ny fomba fananganana sy fametrahana API GraphQL mampiasa Apollo Server izahay. Rehefa tonga ny fotoana hanomezana fialan-tsasatra  Amin'ity lahatsoratra manaraka ity dia mikasa ny hampiakatra ny fahalalako momba ny GraphQL aho amin'ny alàlan'ny fandehanana amin'ny alàlan'ny famandrihana mba hahazoana angon-drakitra amin'ny fotoana tena izy. Hanamboatra serivisy WebSocket ihany koa izahay handany ny famandrihana.  Recap: tranga fampiasana mpanjifa 360  Ny lahatsoratro teo aloha dia nifantoka tamin'ny tranga fampiasana Customer 360, izay itazonan'ny mpanjifan'ny orinasa noforoniko ireto angon-drakitra manaraka ireto:  Fampahafantarana ny mpanjifa  Fampahafantarana adiresy  Fomba fifandraisana  Toetran'ny trosa  Fandresena goavana amin'ny fampiasana GraphQL dia ny fangatahana GraphQL tokana dia afaka maka ny angon-drakitra ilaina rehetra ho an'ny mari-pamantarana mpanjifa (identity tokana).   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 }  Ny fampiasana fomba RESTful mba haka ny fomba fijery tokana (360) an'ny mpanjifa dia nitaky fangatahana sy valiny maro mba hatambatra. GraphQL dia manome antsika vahaolana mahomby kokoa.  Level Up Tanjona  Mba hivoatra amin'ny lafiny rehetra amin'ny fiainana dia tsy maintsy manatratra tanjona vaovao. Ho an'ny tanjoko manokana eto dia midika izany hoe:  Fahatakarana sy fampiharana ny tolo-kevitry ny sandan'ny famandrihana ao amin'ny GraphQL.  Mampiasa fampiharana WebSocket hanina famandrihana GraphQL.  Ny hevitra mampiasa famandrihana amin'ny fanontaniana sy fiovana ao amin'ny GraphQL no fomba tiana indrindra rehefa feno ireto fepetra manaraka ireto:  Fanovàna kely miampy zavatra lehibe  Fanavaozana amin'ny fotoana tena izy (toy ny fampiharana chat)  Zava-dehibe izany satria ny fampiharana ny famandrihana ao amin'ny GraphQL dia tsy misy dikany. Tsy ny lohamilina fototra ihany no mila havaozina, fa ny fampiharana mandany dia mitaky fanavaozana ihany koa.  Soa ihany fa mety tsara ho an'ny famandrihana ny tranga fampiasana ataonay miaraka amin'ny ohatra Customer 360. Ary koa, hampihatra fomba WebSocket izahay amin'ny fampiasana ireo famandrihana ireo.  Toy ny teo aloha, hanohy hampiasa Apollo aho handroso.  Fisondrotana amin'ny famandrihana Creds  Voalohany, mila mametraka ireo tranomboky ilaina isika hanohanana ny famandrihana amin'ny mpizara Apollo GraphQL:   npm install ws npm install graphql-ws @graphql-tools/schema npm install graphql-subscriptions  Miaraka amin'ireo zavatra napetraka ireo dia nifantoka tamin'ny fanavaozana ny   avy amin'ny tahiry tany am-boalohany aho mba hanitarana ny   constant miaraka amin'ireto manaraka ireto: index.ts typedefs   type Subscription { creditUpdated: Credit }  Nanangana tsy tapaka ihany koa aho mba hametrahana ohatra   vaovao ary namorona famandrihana santionany izay hampiasainay any aoriana: PubSub   const pubsub = new PubSub(); pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: { } });  Nodioviko ny vahaolana efa misy ary nanampy   vaovao ho an'ity tranga fampiasana vaovao ity: 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']), } } };  Avy eo aho dia namerina ny fanamafisam-peo ary nampiditra ny famolavolana famandrihana:   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`); });  Mba hanahafana ny fanavaozana entin'ny mpanjifa dia namorona ity fomba manaraka ity aho mba hampitomboana ny fifandanjan'ny trosa amin'ny $50 isaky ny dimy segondra raha mbola mandeha ny serivisy. Raha vao mahatratra (na mihoatra) ny fetran'ny trosa $10,000 ny fifandanjana, dia avereno amin'ny $2,500 ny fifandanjana, manao simulate ny fandoavam-bola natao.   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();  Ny rakitra   feno dia azo jerena   . index.ts eto  Hiverina any amin'ny Heroku  Miaraka amin'ny fahavononana ny serivisy, fotoana izao hametrahantsika ny serivisy mba hifaneraserantsika aminy. Satria niasa tsara i Heroku tamin'ny farany (ary mora ho ahy ny mampiasa azy), andao hifikitra amin'izany fomba izany.  Mba hanombohana dia mila manao ireto baiko Heroku CLI manaraka ireto aho:   $ 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  Ny baiko ihany koa dia nanampy ho azy ny tahiry ampiasain'i Heroku ho lavitra:   $ git remote heroku origin  Araka ny nomarihiko tao amin'ny lahatsoratro teo aloha, Apollo Server dia manafoana ny Apollo Explorer amin'ny tontolo famokarana. Mba hitazonana an'i Apollo Explorer ho an'ny filantsika dia mila nametraka ny fari-piadidiana   ho fampandrosoana aho. Napetrako tamin'ity baiko CLI manaraka ity izany: NODE_ENV   $ heroku config:set NODE_ENV=development Setting NODE_ENV and restarting ⬢ jvc-graphql-server-sub... done, v3 NODE_ENV: development  Efa vonona ny hametraka ny code-ko amin'i Heroku aho:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Ny fijerena haingana ny Dashboard Heroku dia nampiseho ny Apollo Server-ko mandeha tsy misy olana:  Ao amin'ny fizarana Settings, hitako ny URL app Heroku ho an'ity ohatra serivisy ity:   https://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/   Azafady mariho fa tsy ho ampiasaina intsony ity rohy ity amin'ny fotoana namoahana ity lahatsoratra ity.  Amin'izao fotoana izao dia azoko ampidirina amin'ity URL ity ny GraphQL hanombohana ny Apollo Server Studio. Ity dia mamela ahy hahita ny famandrihana miasa araka ny efa nampoizina:   Jereo ny valin'ny famandrihana eo amin'ny ilany havanana amin'ny efijery.  Miakatra amin'ny WebSocket Skillz  Afaka mampiasa   sy ny fahaizan'i Heroku izahay hamorona fampiharana izay mandany ny famandrihana noforoninay. ny fanohanan'ny WebSocket  Raha ny ahy dia namorona rakitra index.js miaraka amin'ireto atiny manaraka ireto aho. Amin'ny ankapobeny, namorona mpanjifa WebSocket izany ary nanangana serivisy HTTP dummy izay azoko ampiasaina hanamarinana ny fandehan'ny mpanjifa:   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'), } );  Ny rakitra   feno dia azo jerena   . index.js ato  Azontsika atao koa ny mametraka an'ity fampiharana Node.js tsotra ity amin'i Heroku, manao izay hametrahana ny fari-piainana   amin'ny URL fampiharana Heroku izay nampiasainay teo aloha. GRAPHQL_SUBSCRIPTION_HOST  Namorona ity   manaraka ity ihany koa aho hilazana amin'i Heroku ny fomba hanombohana ny fampiharana: Procfile   web: node src/index.js  Manaraka izany dia namorona fampiharana Heroku vaovao aho:   $ 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  Avy eo, nametraka ny fari-piadidiana   aho hanondro ny mpizara GraphQL miasa: GRAPHQL_SUBSCRIPTION_HOST   $ heroku --app jvc-websocket-example \ config:set \ GRAPHQL_SUBSCRIPTION_HOST=ws://jvc-graphql-server-sub-1ec2e6406a82.herokuapp.com/graphql  Amin'izao fotoana izao, vonona ny hametraka ny code ho an'i Heroku izahay:   $ git commit --allow-empty -m 'Deploy to Heroku' $ git push heroku  Raha vao manomboka ny mpanjifa WebSocket dia afaka mahita ny toerany ao amin'ny Heroku Dashboard isika:  Amin'ny fijerena ny logs ao amin'ny Heroku Dashboard ho an'ny ohatra   dia afaka mahita ny fanavaozana maro momba ny fananana   amin'ny serivisy   . Tao amin'ny demoko, dia afaka naka ny tranga fampiasana izay nampihena ny fifandanjana ho aotra aho, nanahaka hoe nisy fandoavam-bola: jvc-websocket-example balance jvc-graphql-server-sub  Ao amin'ny terminal dia afaka miditra amin'ireo logs mitovy amin'ny CLI command heroku logs isika.   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]: }  Tsy vitan'ny hoe manana serivisy GraphQL miaraka amin'ny fampiharana famandrihana mandeha izahay, fa manana mpanjifa WebSocket mandany ireo fanavaozana ireo.  Famaranana  Mety ho tadidin'ny mpamaky ahy ny fanambarana iraka manokana nataoko, izay tsapako fa azo ampiharina amin'ny matihanina IT rehetra:  “Afantoha ny fotoananao amin'ny fanaterana endri-javatra/asa izay manitatra ny sandan'ny fanananao ara-tsaina. Ampiasao ny rafitra, ny vokatra ary ny serivisy ho an'ny zavatra hafa rehetra. ” — J. Vester  Ao anatin'ity famandrihana lalina amin'ny famandrihana GraphQL ity, dia nahomby tamin'ny fanavaozam-baovao avy amin'ny Server Apollo mandeha amin'ny Heroku izahay tamin'ny alalan'ny fampiasana serivisy hafa izay mandeha amin'ny Heroku koa—fampiharana miorina amin'ny Node.js izay mampiasa WebSockets. Amin'ny alàlan'ny fampiasana famandrihana maivana, dia nisoroka ny fandefasana fanontaniana momba ny angona tsy miova izahay fa nisoratra anarana fotsiny mba hahazoana fanavaozana ny fifandanjana amin'ny crédit rehefa nitranga izany.  Tao amin'ny teny fampidirana, dia nilaza aho fa mitady fitsipika manan-danja fanampiny ao anatin'ny lohahevitra iray nosoratako teo aloha. Ny famandrihana GraphQL dia ohatra tena tsara amin'ny zavatra tao an-tsaiko satria ahafahan'ny mpanjifa mahazo fanavaozam-baovao avy hatrany, tsy mila mametraka fanontaniana momba ny angon-drakitra loharano. Hampientanentana ny mpanjifa ny angon-drakitra Customer 360 izany, satria fantany fa afaka miaina ny fanavaozana izy ireo rehefa mitranga izany.  Heroku dia ohatra iray hafa izay manohy mifikitra amin'ny fanambaran'ny iraka ataoko amin'ny fanolorana sehatra iray ahafahany manamboatra vahaolana haingana amin'ny fampiasana CLI sy baiko Git mahazatra. Izany dia tsy manome ahy fomba mora fotsiny hanehoana ny famandrihana fampiasako fa ny fampiharana ny mpanjifa mampiasa WebSockets ihany koa.  Raha liana amin'ny kaody loharano ho an'ity lahatsoratra ity ianao dia jereo ny fitehirizako ao amin'ny GitLab:   graphql-server-customer-subscription   websocket-ohatra  Matoky tena aho rehefa milaza fa nahavita nanatsara ny fahaizako GraphQL tamin'ity ezaka ity aho. Vaovao sy fanamby ho ahy ity dia ity… ary nahafinaritra be ihany koa!  Mikasa ny hiditra ao amin'ny fanamarinana aho amin'ny manaraka, izay antenaina fa hanome fahafahana hafa hanatsara ny GraphQL sy Apollo Server. Maharaha vaovao!  Mirary tontolo andro mahafinaritra!

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

Ity horonam-peo ity dia novokarina tamin'ny fiteny niandohan'ny tantara!

Lava loatra; Mamaky

Make resilience your competitive advantage

Manatsara ny fahaizako amin'ny GraphQL: Famandrihana amin'ny fotoana tena izy

Manatsara ny fahaizako amin'ny GraphQL: Famandrihana amin'ny fotoana tena izy

About Author

COMMENTS

HANG TAGS

ITY ARTICLE ITY NO NARESAKA TAMIN'NY

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps