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

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 " Rehefa tonga ny fotoana hanomezana fialan-tsasatra " 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.

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 index.ts avy amin'ny tahiry tany am-boalohany aho mba hanitarana ny typedefs constant miaraka amin'ireto manaraka ireto:

 type Subscription { creditUpdated: Credit }

Nanangana tsy tapaka ihany koa aho mba hametrahana ohatra PubSub vaovao ary namorona famandrihana santionany izay hampiasainay any aoriana:

 const pubsub = new PubSub(); pubsub.publish('CREDIT_BALANCE_UPDATED', { creditUpdated: { } });

Nodioviko ny vahaolana efa misy ary nanampy Subscription vaovao ho an'ity tranga fampiasana vaovao ity:

 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 index.ts feno dia azo jerena 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 NODE_ENV ho fampandrosoana aho. Napetrako tamin'ity baiko CLI manaraka ity izany:

 $ 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 ny fanohanan'ny WebSocket sy ny fahaizan'i Heroku izahay hamorona fampiharana izay mandany ny famandrihana noforoninay.

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 index.js feno dia azo jerena ato .

Azontsika atao koa ny mametraka an'ity fampiharana Node.js tsotra ity amin'i Heroku, manao izay hametrahana ny fari-piainana GRAPHQL_SUBSCRIPTION_HOST amin'ny URL fampiharana Heroku izay nampiasainay teo aloha.

Namorona ity Procfile manaraka ity ihany koa aho hilazana amin'i Heroku ny fomba hanombohana ny fampiharana:

 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 GRAPHQL_SUBSCRIPTION_HOST aho hanondro ny mpizara GraphQL miasa:

 $ 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 jvc-websocket-example dia afaka mahita ny fanavaozana maro momba ny fananana balance amin'ny serivisy jvc-graphql-server-sub . Tao amin'ny demoko, dia afaka naka ny tranga fampiasana izay nampihena ny fifandanjana ho aotra aho, nanahaka hoe nisy fandoavam-bola:

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!