[{"data":1,"prerenderedAt":333},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-ice-cream-with-graphql-subscriptions-i18n-slugs":134,"language-blog-slug-en-ice-cream-with-graphql-subscriptions":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","ice-cream-with-graphql-subscriptions",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":147,"subtitle":79,"isArchived":148,"headerIllustration":149,"date":154,"authors":155,"introTitle":164,"items":165,"pivots":320,"relatedBlogPosts":331,"tags":332,"onMountedScript":158,"onUnmountedScript":158},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Ice cream with GraphQL subscriptions | Blog | De Voorhoede","Get notified whenever ice cream is dispensed in your favourite flavour using real-time GraphQL subscriptions. Read about it in our blog.",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1585835640-graphql-ice-cream-001.jpeg","Ice cream with GraphQL subscriptions",false,{"url":150,"alt":151,"width":152,"height":153},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1585726497-icecreams.png",null,1000,900,"2020-03-31T02:00:00.000+02:00",[156],{"name":157,"lastName":158,"slug":159,"image":160},"Thadee","","thadee",{"url":161,"alt":151,"width":162,"height":163},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Get notified whenever ice cream is dispensed in your favourite flavour using real-time GraphQL subscriptions",[166,170,174,179,182,186,190,193,196,199,202,206,209,212,215,218,221,224,228,231,234,237,240,243,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,299,302,305,308,311,314,317],{"__typename":167,"id":168,"title":158,"body":169},"TextSectionRecord","4484636","\u003Cp>GraphQL is often praised for being a step forward from data retrieval by making calls to REST APIs from your application’s front-end. Sharing a common schema language puts front-end and middle\u002Fback-end developers on the same page. As a front-end developer, you can easily fetch just the data you need with a single call, instead of having to call a bunch of endpoints in series to satisfy your query. Much of the data stitching can now be offloaded to an intermediary graphQL server that will call the underlying data provider services, such as REST APIs, databases and microservices, so you don’t have to.\u003C\u002Fp>\u003Cp>With the introduction of \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgraphql\u002Fgraphql-spec\u002Fblob\u002Fmaster\u002Frfcs\u002FSubscriptions.md\">graphQL subscriptions\u003C\u002Fa> in 2017, you can now use graphQL schema language to subscribe to to event streams and provide real-time updates to the client. Using the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fapollographql\u002Fapollo-server\">Apollo server package\u003C\u002Fa>, you can quickly set up a production-ready graphQL server that supports subscriptions over a websocket. Combine this with a regular express server and witness the sensational power of graphQL subscriptions.\u003C\u002Fp>\u003Cp>Today we’re building a graphQL api for an ice cream shop. Whenever an ice cream is dispensed, we want to be notified. Also, we want to be able to pass a parameter which specifies the ice flavour we want to be notified about.\u003C\u002Fp>",{"__typename":167,"id":171,"title":172,"body":173},"4484637","Getting started","\u003Cp>Apollo graphQL’s \u003Ccode>apollo-server\u003C\u002Fcode> delivers you a production-ready graphQL server without too much hassle. Apollo server can wrap a web server that you already have, like Express.\u003C\u002Fp>",{"__typename":175,"id":176,"language":177,"body":178},"CodeBlockRecord","4484638","bash","npm install apollo-server-express express graphql",{"__typename":167,"id":180,"title":158,"body":181},"4484639","\u003Cp>Include the required packages in your main JS file\u003C\u002Fp>",{"__typename":175,"id":183,"language":184,"body":185},"4484640","javascript","const express = require('express');\nconst { createServer } = require('http'); \nconst { ApolloServer, gql } = require('apollo-server-express');",{"__typename":167,"id":187,"title":188,"body":189},"4484641","GraphQL schema and resolvers","\u003Cp>Let’s start by writing up our \u003Cstrong>types\u003C\u002Fstrong>. So far, we need the default required \u003Cstrong>Query\u003C\u002Fstrong> type and a basic \u003Cstrong>IceCream\u003C\u002Fstrong> type to perform basic graphQL queries. As we’d like to retrieve all ice cream flavours, as well as a single ice cream by flavour, we’ll add the \u003Cstrong>iceCream\u003C\u002Fstrong> and \u003Cstrong>iceCreams\u003C\u002Fstrong> queries.\u003C\u002Fp>",{"__typename":175,"id":191,"language":184,"body":192},"4484642","const typeDefs = gql`\n    type IceCream {\n    id: Int!\n    flavour: String!\n    description: String!\n    }\n\n    type Query {\n    iceCream(flavour: String!): IceCream\n    iceCreams: [IceCream]\n    }\n`",{"__typename":167,"id":194,"title":158,"body":195},"4484643","\u003Cp>To gather the data that our client request, which is described by the schema, we’ll write \u003Cstrong>resolvers\u003C\u002Fstrong>. Resolvers are handler functions for graphQL, which run in response to an incoming request, fetch data from somewhere, and return it to the client in the desired format. Since we don’t have a real back-end to talk to, we’ll have a stub contain our ice cream.\u003C\u002Fp>",{"__typename":175,"id":197,"language":184,"body":198},"4484644","\u002F\u002F The excellent flavour descriptions courtesy of https:\u002F\u002Fphrasegenerator.com\u002Fwine, with modifications.\n    const stub = [\n      {\n        id: 0,\n        flavour: 'vanilla',\n        description: 'A flippant pepper bouquet and alcoholic garlic essences are blended in'\n      },{\n        id: 1,\n        flavour: 'strawberry',\n        description: 'Blends indigestible parsnip flavors with a sandy cool ranch flavor'\n      },{\n        id: 2,\n        flavour: 'pear',\n        description: 'A soporiphic coconut finish and enticing Bar-B-Q midtones are intertwined'\n      }\n    ]\n    \n    const resolvers = {\n      Query: {\n        iceCreams: () => {\n          return Promise.resolve(stub)\n        },\n        iceCream: (_, { flavour }) => {\n          return Promise.resolve(stub.find(({ flavour:stubFlavour }) => flavour === stubFlavour))\n        }\n      }\n    };",{"__typename":167,"id":200,"title":158,"body":201},"4484645","\u003Cp>Querying for \u003Cstrong>iceCreams\u003C\u002Fstrong> will return the entire dataset, which contains three items. If you query for \u003Cstrong>iceCream\u003C\u002Fstrong>, you’re expected to pass the flavour you need as a string. The \u003Cstrong>flavour\u003C\u002Fstrong> argument is then used to look up an ice cream of which the \u003Cstrong>flavour\u003C\u002Fstrong> property (destructured to \u003Cstrong>stubFlavour\u003C\u002Fstrong> here) is equal to the \u003Cstrong>flavour\u003C\u002Fstrong> argument value.\u003C\u002Fp>",{"__typename":167,"id":203,"title":204,"body":205},"4484646","Run the server","\u003Cp>Create an instance of \u003Ccode>ApolloServer\u003C\u002Fcode> and pass it the \u003Cstrong>typeDefs\u003C\u002Fstrong> and \u003Cstrong>resolvers\u003C\u002Fstrong> that were created earlier as an options object.\u003C\u002Fp>",{"__typename":175,"id":207,"language":184,"body":208},"4484647","const server = new ApolloServer({\n  typeDefs,\n  resolvers\n})",{"__typename":167,"id":210,"title":158,"body":211},"4484648","\u003Cp>Next, make a regular express app and call the Apollo server method \u003Cstrong>applyMiddleware\u003C\u002Fstrong> to hook the Apollo server in to it.\u003C\u002Fp>",{"__typename":175,"id":213,"language":184,"body":214},"4484649","const app = express()\n\nserver.applyMiddleware({ app })",{"__typename":167,"id":216,"title":158,"body":217},"4484650","\u003Cp>Pass the express app to node’s \u003Cstrong>http.createServer\u003C\u002Fstrong> and call \u003Cstrong>listen\u003C\u002Fstrong> on it to start the server. The server will listen on http:\u002F\u002Flocalhost:3000\u003C\u002Fp>",{"__typename":175,"id":219,"language":184,"body":220},"4484651","const httpServer = createServer(app)\n\nconst port = 3000\n\nhttpServer.listen(port, () => {\n  console.log(`Server ready at http:\u002F\u002Flocalhost:${port}${server.graphqlPath}`)\n})",{"__typename":167,"id":222,"title":158,"body":223},"4484652","\u003Cp>We’re using an express app here because we want to add some endpoints of our own at a later stage.\u003C\u002Fp>",{"__typename":167,"id":225,"title":226,"body":227},"4484653","GraphQL playground","\u003Cp>As soon as you have your server running, you can access a graphQL playground at its default url http:\u002F\u002Flocalhost:3000\u002Fgraphql\u003C\u002Fp>\u003Cp>Lets a query for a vanilla ice cream\u003C\u002Fp>",{"__typename":175,"id":229,"language":184,"body":230},"4484654","query {\n  iceCream(flavour: \"vanilla\") {\n    flavour\n    description\n  }\n}",{"__typename":167,"id":232,"title":158,"body":233},"4484655","\u003Cp>This returns ice cream data with the properties we asked for\u003C\u002Fp>",{"__typename":175,"id":235,"language":184,"body":236},"4484656","{\n  \"data\": {\n    \"iceCream\": {\n      \"description\": \"A flippant pepper bouquet and alcoholic garlic essences are blended in\",\n      \"flavour\": \"vanilla\"\n    }\n  }\n}",{"__typename":167,"id":238,"title":158,"body":239},"4484657","\u003Cp>You can also retrieve a list of all available ice cream with the \u003Ccode>iceCreams\u003C\u002Fcode> query\u003C\u002Fp>",{"__typename":175,"id":241,"language":184,"body":242},"4484658","query {\n  iceCreams {\n    flavour\n    description\n  }\n}\n",{"__typename":167,"id":244,"title":245,"body":246},"4484659","Real-time ice cream","\u003Cp>So far, we’re able to get ice cream data if we ask for it explicitly, which is very nice. However, we wanted real time updates each time ice cream is dispensed, so what’s up with that?\u003C\u002Fp>\u003Cp>To be able to handle subscriptions, we need a component that is able to subscribe to and publish events. The \u003Ccode>graphql-subscriptions\u003C\u002Fcode> package provides this functionality\u003C\u002Fp>",{"__typename":175,"id":248,"language":177,"body":249},"4484660","npm install graphql-subscriptions",{"__typename":175,"id":251,"language":184,"body":252},"4484661","const express = require('express');\nconst { createServer } = require('http'); \nconst { ApolloServer, gql, withFilter } = require('apollo-server-express');\nconst { PubSub } = require('graphql-subscriptions');\n\nconst pubsub = new PubSub();",{"__typename":167,"id":254,"title":158,"body":255},"4484662","\u003Cp>Let’s change the \u003Cstrong>typeDefs\u003C\u002Fstrong> variable and add a \u003Cstrong>Subscription\u003C\u002Fstrong> definition for an \u003Cstrong>iceCreamDispensed\u003C\u002Fstrong> event\u003C\u002Fp>",{"__typename":175,"id":257,"language":184,"body":258},"4484663","const typeDefs = gql`\ntype IceCream {\n  id: Int!\n  flavour: String!\n  description: String!\n  owner: String!\n}\ntype Query {\n  iceCream(flavour: String!): IceCream\n  iceCreams: [IceCream]\n}\ntype Subscription {\n  iceCreamDispensed(flavour: String): IceCream\n}\n`",{"__typename":167,"id":260,"title":158,"body":261},"4484664","\u003Cp>We’ll also need to add a \u003Cstrong>resolver\u003C\u002Fstrong> to handle subscriptions to the \u003Cstrong>iceCreamDispensed\u003C\u002Fstrong> event.\u003C\u002Fp>",{"__typename":175,"id":263,"language":184,"body":264},"4484665","\u002F\u002F Event name to listen to\nconst ICE_CREAM_DISPENSED = 'ICE_CREAM_DISPENSED';\n\nconst resolvers = {\n  Subscription: {\n    iceCreamDispensed: {\n      subscribe: () => pubsub.asyncIterator([ ICE_CREAM_DISPENSED ]),\n    }\n  },\n  \u002F\u002F ... remaining part of resolvers stays the same \n  Query: {",{"__typename":167,"id":266,"title":158,"body":267},"4484666","\u003Cp>And finally, we’ll attach the capability to accept websocket connections to our http server. call \u003Cstrong>installSubscriptionHandlers\u003C\u002Fstrong> passing the plain \u003Cstrong>httpServer\u003C\u002Fstrong>\u003C\u002Fp>",{"__typename":175,"id":269,"language":184,"body":270},"4484667","server.applyMiddleware({ app })\n\nconst httpServer = createServer(app)\n\nserver.installSubscriptionHandlers(httpServer)\n\nconst port = 3000\n\nhttpServer.listen(port, () => {\n  console.log(`Server ready at http:\u002F\u002Flocalhost:${port}${server.graphqlPath}`)\n  console.log(`Subscriptions ready at ws:\u002F\u002Flocalhost:${port}${server.subscriptionsPath}`)\n})",{"__typename":167,"id":272,"title":158,"body":273},"4484668","\u003Cp>With this defined and the server running, we can use the \u003Cstrong>subscription\u003C\u002Fstrong> type in our graphQL playground\u003C\u002Fp>",{"__typename":175,"id":275,"language":184,"body":276},"4484669","subscription {\n  iceCreamDispensed {\n    flavour\n    description\n  }\n}",{"__typename":167,"id":278,"title":158,"body":279},"4484670","\u003Cp>Run this and you’ll be subscribed to the event, but because \u003Ccode>ICE_CREAM_DISPENSED\u003C\u002Fcode> is not being fired anywhere, you won’t see any data coming in.\u003C\u002Fp>\u003Cp>We’ll leverage the express app that our graphQL server is mounted on to expose an endpoint that can be POSTed to to trigger the dispensing of a random ice cream flavour.\u003C\u002Fp>\u003Cp>Inside the \u003Cstrong>\u002Fdispatch\u003C\u002Fstrong> handler, a random ice cream flavour is selected and picked from the stub data. Then we call \u003Cstrong>pubsub.publish\u003C\u002Fstrong> with an event name of \u003Ccode>ICE_CREAM_DISPENSED\u003C\u002Fcode> and our randomly selected ice cream. The subscription resolver that is listening for this event, will react by emitting the data to the subscribers.\u003C\u002Fp>",{"__typename":175,"id":281,"language":184,"body":282},"4484671","const app = express()\n\napp.post('\u002Fdispatch', (req, res) => {\n  const flavours = ['vanilla','pear','strawberry']\n  const flavour = flavours[Math.round(Math.random() * (flavours.length - 1))]\n  const ice = stub.find(item => item.flavour === flavour)\n  pubsub.publish(ICE_CREAM_DISPENSED, { iceCreamDispensed: ice } )\n  return res.status(202).send('accepted')\n})\n\nserver.applyMiddleware({ app })\n",{"__typename":167,"id":284,"title":158,"body":285},"4484672","\u003Cp>Re-start the server and send an http request to the \u003Cstrong>\u002Fdispatch\u003C\u002Fstrong> endpoint\u003C\u002Fp>",{"__typename":175,"id":287,"language":177,"body":288},"4484673","curl -X POST http:\u002F\u002Flocalhost:3000\u002Fdispatch",{"__typename":167,"id":290,"title":158,"body":291},"4484674","\u003Cp>When you are subscribed, you should see data coming in on the right in the playground.\u003C\u002Fp>",{"__typename":175,"id":293,"language":184,"body":294},"4484675","{\n  \"data\": {\n    \"iceCreamDispensed\": {\n      \"flavour\": \"strawberry\",\n      \"description\": \"Blends indigestible parsnip flavors with a sandy cool ranch flavor\"\n    }\n  }\n}",{"__typename":167,"id":296,"title":297,"body":298},"4484676","Event filtering","\u003Cp>Nice, but not quite what we wanted. Now we’re subscribed to all flavours. But what if we were only interested in events pertaining to a particular flavour? Our \u003Cstrong>iceCreamDispensed\u003C\u002Fstrong> resolver is not yet doing anything with the \u003Cstrong>flavour\u003C\u002Fstrong> argument that we pass to it. But it should. How? We can use the \u003Ccode>withFilter\u003C\u002Fcode> function provided by the \u003Ccode>apollo-server-express\u003C\u002Fcode> package.\u003C\u002Fp>\u003Cp>\u003Ccode>withFilter\u003C\u002Fcode> accepts a function returning an \u003Cstrong>AsyncIterator\u003C\u002Fstrong> and a filter function, which should return a boolean or a \u003Cstrong>Promise\u003C\u002Fstrong> of a boolean. The filter function decides whether or not the event will be emitted to a subscriber, and has access to the arguments that were passed with the subscription.\u003C\u002Fp>\u003Cp>First, import \u003Ccode>withFilter\u003C\u002Fcode>\u003C\u002Fp>",{"__typename":175,"id":300,"language":184,"body":301},"4484677","const express = require('express');\nconst { createServer } = require('http'); \nconst { ApolloServer, gql, withFilter } = require('apollo-server-express');\nconst { PubSub } = require('graphql-subscriptions');",{"__typename":167,"id":303,"title":158,"body":304},"4484678","\u003Cp>Change the \u003Ccode>iceCreamDispensed\u003C\u002Fcode> resolver to use \u003Ccode>withFilter\u003C\u002Fcode>\u003C\u002Fp>",{"__typename":175,"id":306,"language":184,"body":307},"4484679","const resolvers = {\n  Subscription: {\n    iceCreamDispensed: {\n      subscribe: withFilter(\n        () => pubsub.asyncIterator([ ICE_CREAM_DISPENSED ]),\n        ({ iceCreamDispensed: { flavour:payloadFlavour } }, { flavour:requestFlavour }) => {\n          if (!requestFlavour) {\n            return true\n          }\n          return payloadFlavour === requestFlavour\n        }\n      )\n    },\n  },\n  Query: {\n  \u002F\u002F ...same as before\n  ",{"__typename":167,"id":309,"title":158,"body":310},"4484680","\u003Cp>Pass a \u003Cstrong>flavour\u003C\u002Fstrong> argument to your subscription in the playground\u003C\u002Fp>",{"__typename":175,"id":312,"language":184,"body":313},"4484681","subscription {\n  iceCreamDispensed (flavour: \"vanilla\") {\n    flavour\n    description\n  }\n}",{"__typename":167,"id":315,"title":158,"body":316},"4484682","\u003Cp>Now, you’ll only receive events about \u003Cstrong>vanilla\u003C\u002Fstrong> ice cream over your subscription.\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvigilant-glitter-n38hp\">Here is the finished code\u003C\u002Fa>\u003C\u002Fp>",{"__typename":175,"id":318,"language":184,"body":319},"4484683","const express = require('express');\nconst { createServer } = require('http'); \nconst { ApolloServer, gql, withFilter } = require('apollo-server-express');\nconst { PubSub } = require('graphql-subscriptions');\n\nconst pubsub = new PubSub();\n\nconst typeDefs = gql`\ntype IceCream {\n  id: Int!\n  flavour: String!\n  description: String!\n}\ntype Query {\n  iceCream(flavour: String!): IceCream\n  iceCreams: [IceCream]\n}\ntype Subscription {\n  iceCreamDispensed(flavour: String): IceCream\n}\n`\n\nconst stub = [\n  {\n    id: 0,\n    flavour: 'vanilla',\n    description: 'A flippant pepper bouquet and alcoholic garlic essences are blended in'\n  },{\n    id: 1,\n    flavour: 'strawberry',\n    description: 'Blends indigestible parsnip flavors with a sandy cool ranch flavor'\n  },{\n    id: 2,\n    flavour: 'pear',\n    description: 'A soporiphic coconut finish and enticing Bar-B-Q midtones are intertwined'\n  }\n]\n\nconst ICE_CREAM_DISPENSED = 'ICE_CREAM_DISPENSED';\n\nconst resolvers = {\n  Subscription: {\n    iceCreamDispensed: {\n      subscribe: \n      withFilter(\n        () => pubsub.asyncIterator([ ICE_CREAM_DISPENSED ]),\n        ({ iceCreamDispensed: { flavour:payloadFlavour } }, { flavour:requestFlavour }) => {\n          if (!requestFlavour) {\n            return true\n          }\n          return payloadFlavour === requestFlavour\n        }\n      )\n    }\n  },\n  Query: {\n    iceCreams: () => {\n      return Promise.resolve(stub)\n    },\n    iceCream: (_, { flavour }) => {\n      return Promise.resolve(stub.find(({ flavour:stubFlavour }) => flavour === stubFlavour))\n    }\n  }\n};\n\nconst server = new ApolloServer({\n  typeDefs,\n  resolvers\n})\n\nconst app = express()\n\napp.post('\u002Fdispatch', (req, res) => {\n  const flavours = ['vanilla','pear','strawberry']\n  const flavour = flavours[Math.round(Math.random() * (flavours.length - 1))]\n  const ice = stub.find(item => item.flavour === flavour)\n  pubsub.publish(ICE_CREAM_DISPENSED, { iceCreamDispensed: ice } )\n  return res.status(202).send('accepted')\n})\n\nserver.applyMiddleware({ app })\n\nconst httpServer = createServer(app)\n\nserver.installSubscriptionHandlers(httpServer)\n\nconst port = 3000\n\nhttpServer.listen(port, () => {\n  console.log(`Server ready at http:\u002F\u002Flocalhost:${port}${server.graphqlPath}`)\n  console.log(`Subscriptions ready at ws:\u002F\u002Flocalhost:${port}${server.subscriptionsPath}`)\n})\n",[321],{"title":322,"body":323,"links":324,"mailchimpValue":158,"mailchimpName":158,"mailchimpId":158,"formType":158,"contactPerson":151},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[325],{"__typename":326,"id":327,"title":328,"link":329},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":330},"jobs",[],[],1776256150239]