{"id":7528,"date":"2021-02-02T20:00:23","date_gmt":"2021-02-02T19:00:23","guid":{"rendered":"https:\/\/prototype.staging.dev.frachtwerk.de\/?p=7528"},"modified":"2022-07-19T17:52:44","modified_gmt":"2022-07-19T15:52:44","slug":"modern-reactive-web-apis-2","status":"publish","type":"post","link":"https:\/\/prototype.staging.dev.frachtwerk.de\/allgemein\/modern-reactive-web-apis-2\/","title":{"rendered":"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2"},"content":{"rendered":"<div  class=\"tatsu-gn9s1vabb059y499 tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"1px 0px 90px 0px\"}' data-padding-top='1px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-one-col tatsu-row-has-one-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-gn9s1vabd77lmt2h\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-col tatsu-column-image-none tatsu-column-effect-none  tatsu-gn9s1vabfw5qa3c1\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9ttqv82u6arpjp   \" ><style>.tatsu-gn9ttqv82u6arpjp .tatsu-inline-text-inner{width: 100%;text-align: left;}.tatsu-gn9ttqv82u6arpjp.tatsu-inline-text{margin: 0px 0px 80px 0px;}@media only screen and (max-width: 767px) {.tatsu-gn9ttqv82u6arpjp .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><span class=\"fs-s\"><em><span class=\"palette-2 fs-s\">Originally published at <\/span><a style=\"color: #1395b8;\" href=\"https:\/\/muetsch.io\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2.html\" target=\"_self\" rel=\"noopener\">muetsch.io<\/a> <span class=\"palette-2 fs-s\">on <time title=\"Monday, June 8, 2020, 2:00:00 AM\" datetime=\"2020-06-08T00:00:00Z\">Jun 06, 2020<\/time><\/span><\/em><\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-gn9s1vabtneaywn2  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 880px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 27.272727272727%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"ax3gb0v3hw65oz3pbbyd\" data-src = \"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-content\/uploads\/2020\/06\/ax3gb0v3hw65oz3pbbyd.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-gn9s1vabtneaywn2 .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-gn9s1vabtneaywn2.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vabhqdwzpb2   \" ><style>.tatsu-gn9s1vabhqdwzpb2 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vabhqdwzpb2 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>In the <a href=\"..\/modern-reactive-web-apis\" target=\"_self\" rel=\"noopener\">previous<\/a> part, concepts and benefits of GraphQL and <a href=\"https:\/\/graphql.org\/blog\/subscriptions-in-graphql-and-relay\/\" target=\"_blank\" rel=\"noopener\">GraphQL Subscriptions<\/a> were presented and proposed as a modern, highly flexible alternative for designing web APIs.<\/p>\n<p>In this post, we are going to look at actual code. For demonstration purposes, a small single-page application (SPA) is built as an example. It can serve as a cleanly structured starting point for new apps based on the proposed tech stack.<\/p>\n<p>> <strong>Code<\/strong>: <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\" target=\"_blank\" rel=\"noopener\">muety\/go-graphql-sse-example<\/a><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rJDRHXwe_   \" ><style>.tatsu-rJDRHXwe_ .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rJDRHXwe_ .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h2>What to build?<\/h2>\n<p>The demo web app built in the context of this article comprised of a client-side frontend, built with <a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noopener\">VueJS<\/a> and a server-side component built with Go. The two components interact with each other through a GraphQL API, which additionally offers the option to subscribe to data updates using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\" target=\"_blank\" rel=\"noopener\">Server-Sent Events<\/a>.<\/p>\n<p>With this demo app, we aim to mimic the functionality of a very basic, minimalist food ordering system. Customers can choose from a list of food products and place their orders. They are shown a waiting number an estimated processing time for their orders and are notified once the order is ready to be picked up. One the other side there is the kiosk operator, who views a live dashboard of currently pending orders, which appear just as they are being placed.<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module be-shadow-medium tatsu-image-lazyload tatsu-gn9s1vac9zbl6ug2  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 2770px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 70.469314079422%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"demo web app\" data-src = \"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-content\/uploads\/2021\/02\/demo-web-app.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-gn9s1vac9zbl6ug2 .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-gn9s1vac9zbl6ug2.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class = \"tatsu-special-heading-wrap  tatsu-gn9sgog0b29npgci \"  \"  ><style>.tatsu-gn9sgog0b29npgci.tatsu-special-heading-wrap{font-size: 23px;margin: 0px 0px 10px 0px;text-align: left;}.tatsu-gn9sgog0b29npgci.tatsu-special-heading-wrap .tatsu-title{letter-spacing: 2px;}.tatsu-gn9sgog0b29npgci.tatsu-special-heading-wrap .tatsu-border{background: rgba(0,181,214,1);}<\/style><div class = \"special-heading-inner-wrap tatsu-border-style1\" ><div class = \"tatsu-border\" ><\/div><h6 class = \"tatsu-title\">Technology Stack<\/h6><\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vaby2byvk6k   \" ><style>.tatsu-gn9s1vaby2byvk6k .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vaby2byvk6k .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>In summary, the following technologies are used:<\/p>\n<ul>\n<li><a href=\"https:\/\/golang.org\/\" target=\"_blank\" rel=\"noopener\">Go<\/a> as the primary backend-side language<\/li>\n<li><a href=\"https:\/\/graphql.org\/\" target=\"_blank\" rel=\"noopener\">GraphQL<\/a> as a \u201cprotocol\u201d for defining web interfaces<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\" target=\"_blank\" rel=\"noopener\">Server-Sent Events<\/a> as a simple protocol for live updates, used as an implementation of <a href=\"https:\/\/graphql.org\/blog\/subscriptions-in-graphql-and-relay\/\" target=\"_blank\" rel=\"noopener\">GraphQL Subscriptions<\/a> here<\/li>\n<li><a href=\"https:\/\/www.mongodb.com\/\" target=\"_blank\" rel=\"noopener\">MongoDB<\/a> as a flexible document database for storage<\/li>\n<li><a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noopener\">VueJS<\/a> as a frontend framework to build single-page web applications<\/li>\n<\/ul>\n<p>In addition, <a href=\"https:\/\/www.npmjs.com\/package\/graphql-request\" target=\"_blank\" rel=\"noopener\">graphql-request<\/a> is used as a little helper library on the frontend to issue GraphQL queries more easily. It constitutes a light-weight wrapper around the plain <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/API\/Fetch_API\" target=\"_blank\" rel=\"noopener\">Fetch API<\/a>.<\/p>\n<p>On the backend side, GraphQL development is facilitated by the excellent <a href=\"https:\/\/github.com\/graph-gophers\/graphql-go\" target=\"_self\" rel=\"noopener\">graphql-go<\/a> package, which already provides well-defined guidelines to get started (thanks to the authors!).<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vabucdi00dc   \" ><style>.tatsu-gn9s1vabucdi00dc .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vabucdi00dc .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h2 id=\"Data-Model\">Data Model<\/h2>\n<p>With GraphQL, you need to specify a <a href=\"https:\/\/graphql.org\/learn\/schema\/\" target=\"_blank\" rel=\"noopener\">schema<\/a> using a GrapQL-specific syntax. It includes all entities, which your API should be able to deal with and is essentially a set of type definitions, split among one or more <code>.graphql<\/code> files.<\/p>\n<p>Every GraphQL app consists of root types, defining all supported queries, mutations, and subscriptions as well as entity types.<\/p>\n<p>For our app, the root schema looks like this (<a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/master\/schema\/schema.graphql\" target=\"_blank\" rel=\"noopener\">schema\/schema.graphql<\/a>):<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-rJFEPXPxO  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-rJFEPXPxO.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-rJFEPXPxO .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\">schema {<\/span>\n<span class=\"line\">    query: Query<\/span>\n<span class=\"line\">    mutation: Mutation<\/span>\n<span class=\"line\">    subscription: Subscription<\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\">type Query {<\/span>\n<span class=\"line\">    product(id: ID!): Product<\/span>\n<span class=\"line\">    products(): [Product]<\/span>\n<span class=\"line\">    order(id: ID!): Order<\/span>\n<span class=\"line\">    orders(status: String): [Order]<\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\">type Mutation {<\/span>\n<span class=\"line\">    createOrder(order: OrderInput!): Order<\/span>\n<span class=\"line\">    updateOrder(order: OrderUpdateInput!): Order<\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\">type Subscription {<\/span>\n<span class=\"line\">    orderCreated(): Order<\/span>\n<span class=\"line\">    orderChanged(id: ID!): Order<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vac1gdpi0cl   \" ><style>.tatsu-gn9s1vac1gdpi0cl .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vac1gdpi0cl .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>The type definition for the <code>Product<\/code> type referenced in the root schema is given as (<a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/master\/schema\/type\/product.graphql\" target=\"_blank\" rel=\"noopener\">schema\/type\/product.graphql<\/a>):<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-BkQYPQvxO  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-BkQYPQvxO.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-BkQYPQvxO .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\">type Product {<\/span>\n<span class=\"line\">    id: ID!<\/span>\n<span class=\"line\">    name: String<\/span>\n<span class=\"line\">    description: String<\/span>\n<span class=\"line\">    price: Float<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Hy7l_mDx_   \" ><style>.tatsu-Hy7l_mDx_ .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Hy7l_mDx_ .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>The entire schema can be found in the GitHub <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/tree\/master\/schema\/type\" target=\"_blank\" rel=\"noopener\">repository<\/a>.<\/p>\n<p>After having defined your schema, in the case of <a href=\"https:\/\/github.com\/graph-gophers\/graphql-go\" target=\"_self\" rel=\"noopener\">graphql-go,<\/a> it gets transformed into Go code, so it can be compiled into the final Go executable. It can then be loaded on application startup (see <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/master\/server.go#L35\" target=\"_blank\" rel=\"noopener\">server.go<\/a>) and served via an HTTP endpoint. Pretty straightforward!<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-Bkzm_Xvld  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-Bkzm_Xvld.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-Bkzm_Xvld .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\">graphqlSchema := graphql.MustParseSchema(schema.GetRootSchema(), &resolver.Resolver{})\n<\/span>\n<span class=\"line\">http.Handle(<span class=\"string\">\"\/api\/query\"<\/span>, middleware.AddContext(ctx, &middleware.GraphQL{Schema: graphqlSchema}))<\/span><\/pre>\n<pre><span class=\"line\">\u00a0<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rJiEuQPg_   \" ><style>.tatsu-rJiEuQPg_ .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rJiEuQPg_ .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h2 id=\"Resolvers\">Resolvers<\/h2>\n<p>After having defined and loaded the schema, so-called <a href=\"https:\/\/graphql.org\/learn\/execution\/#root-fields-resolvers\" target=\"_blank\" rel=\"noopener\">resolvers<\/a> need to be defined. The concept of resolvers is common among most GraphQL server libraries for various different programming languages. A resolver is responsible for providing the data for every field of an entity, e.g. for the <code>ID<\/code>, <code>name<\/code>, <code>description<\/code>, and <code>price<\/code> fields. Such fields can be literals, as it is the case with all fields of the <code>Product<\/code> type, but also other nested entities, like in the <code>products<\/code> field of the following <code>Order<\/code> type:<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-gn9s1vabyv15jfdg  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-gn9s1vabyv15jfdg.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-gn9s1vabyv15jfdg .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\">type Order {<\/span>\n<span class=\"line\">    id: ID!<\/span>\n<span class=\"line\">    ...<\/span>\n<span class=\"line\">    products: [Product]<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vabzlfnad69   \" ><style>.tatsu-gn9s1vabzlfnad69 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vabzlfnad69 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>For literals, the resolver simply fills in the actual string, number, or boolean. For complex types, it delegates their resolution to their respective resolvers recursively. For instance, to resolve <code>products<\/code>, the <code>orderResolver<\/code> will ask a <code>productResolver<\/code> to do its respective duty.<\/p>\n<p>When working with <code>go-graphql<\/code>, a simple resolver looks like this (<a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/master\/resolver\/product.go\" target=\"_blank\" rel=\"noopener\">resolvers\/product.go<\/a>):<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-ByjO_QDe_  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-ByjO_QDe_.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-ByjO_QDe_ .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\"><span class=\"keyword\">type<\/span> productResolver <span class=\"keyword\">struct<\/span> {<\/span>\n<span class=\"line\">\tp *model.Product<\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"params\">(r *productResolver)<\/span> <span class=\"title\">Id<\/span><span class=\"params\">()<\/span> <span class=\"title\">graphql<\/span>.<span class=\"title\">ID<\/span><\/span> {<\/span>\n<span class=\"line\">\t<span class=\"keyword\">return<\/span> graphql.ID(r.p.Id)<\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"params\">(r *productResolver)<\/span> <span class=\"title\">Name<\/span><span class=\"params\">()<\/span> *<span class=\"title\">string<\/span><\/span> {<\/span>\n<span class=\"line\">\t<span class=\"keyword\">return<\/span> &r.p.Name<\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"params\">(r *productResolver)<\/span> <span class=\"title\">Description<\/span><span class=\"params\">()<\/span> *<span class=\"title\">string<\/span><\/span> {<\/span>\n<span class=\"line\">\t<span class=\"keyword\">return<\/span> &r.p.Description<\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"params\">(r *productResolver)<\/span> <span class=\"title\">Price<\/span><span class=\"params\">()<\/span> *<span class=\"title\">float64<\/span><\/span> {<\/span>\n<span class=\"line\">\t<span class=\"keyword\">return<\/span> &r.p.Price<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkcloQPgu   \" ><style>.tatsu-BkcloQPgu .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkcloQPgu .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>Very simple. It is instantiated with a reference to a <code>Product<\/code> struct, which was previously loaded from the database and simply maps attributes of the raw data model to the respective GraphQL fields. Please note that it doesn\u2019t have to be that trivial. For instance, your MongoDB schema might define <code>firstName<\/code> and <code>lastName<\/code> fields, while your GraphQL type only has <code>name<\/code>. In that case, the resolver would have to do some basic concatenation.<\/p>\n<p>Things get a little more complex when dealing with non-literal fields, like the <code>Order's<\/code> <code>products<\/code> above. In our database schema, an order only holds a list of product IDs as <code>items<\/code>. However, the GraphQL schema declares to return actual product objects. To do so, the respective resolver method first fetches the products for every ID from the database and then passes it on to <code>productResolver<\/code>s (see <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/e8e5c24ea413aa078e3c6816a5a85f7337209091\/resolver\/order.go#L53\" target=\"_blank\" rel=\"noopener\">resolvers\/order.go<\/a>):<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-Bk9DjmweO  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-Bk9DjmweO.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-Bk9DjmweO .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\">...<\/span>\n<span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"params\">(r *orderResolver)<\/span> <span class=\"title\">Products<\/span><span class=\"params\">(ctx context.Context)<\/span> <span class=\"params\">(*[]*productResolver, error)<\/span><\/span> {<\/span>\n<span class=\"line\">\tl := <span class=\"built_in\">make<\/span>([]*productResolver, <span class=\"built_in\">len<\/span>(r.o.Items))<\/span>\n\n<span class=\"line\">\tproducts, err := ctx.Value(service.KeyProductService).(*service.ProductService).GetBatchMap(r.o.Items)<\/span>\n<span class=\"line\">\t<span class=\"keyword\">if<\/span> err != <span class=\"literal\">nil<\/span> {<\/span>\n<span class=\"line\">\t\t<span class=\"keyword\">return<\/span> <span class=\"literal\">nil<\/span>, err<\/span>\n<span class=\"line\">\t}<\/span>\n\n<span class=\"line\">\t<span class=\"keyword\">for<\/span> i, id := <span class=\"keyword\">range<\/span> r.o.Items {<\/span>\n<span class=\"line\">\t\tl[i] = &productResolver{p: products[id]}<\/span>\n<span class=\"line\">\t}<\/span>\n\n<span class=\"line\">\t<span class=\"keyword\">return<\/span> &l, <span class=\"literal\">nil<\/span><\/span>\n<span class=\"line\">}<\/span>\n<span class=\"line\">...<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-S17q8mDxu   \" ><style>.tatsu-S17q8mDxu .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-S17q8mDxu .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>Resolvers are very modular, coherent in themselves and can be composed together to build up an entire API. Note that even the very entrypoint of the GraphQL API is just a \u201croot\u201d resolver. You can find all resolvers, including those for mutations and subscriptions as well, in the <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/tree\/master\/resolver\" target=\"_blank\" rel=\"noopener\">repo<\/a>.<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkCFiXDgO   \" ><style>.tatsu-BkCFiXDgO .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkCFiXDgO .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h2 id=\"Subscriptions\">Subscriptions<\/h2>\n<p>Probably the most interesting part here is subscriptions, as they provide a nice mechanism to make web applications reactive to backend-side data updates. As mentioned in the previous article, the GraphQL specification does not dictate how to technically implement subscriptions. Therefore, we decided to use Server-Sent Events (SSE) as a server-to-client communication channel. Technically, SSEs are simply a long-running HTTP request, which data is written to in form of a text stream and therefore very light-weight and easy to use.<\/p>\n<p>On the backend side, we introduce a light-weight <a href=\"https:\/\/github.com\/leandro-lugaresi\/hub\" target=\"_self\" rel=\"noopener\">event bus<\/a> to our <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/tree\/master\/service\" target=\"_blank\" rel=\"noopener\">services<\/a>. For every data change, i.e. updates, creations or deletions, an event is published to the bus (see <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/e8e5c24ea413aa078e3c6816a5a85f7337209091\/service\/order.go#L66\" target=\"_blank\" rel=\"noopener\">services\/order.go<\/a>):<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-B1jJhmDgO  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-B1jJhmDgO.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-B1jJhmDgO .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"params\">(s *OrderService)<\/span> <span class=\"title\">Create<\/span><span class=\"params\">(order *model.Order)<\/span> <span class=\"params\">(*model.Order, error)<\/span><\/span> {<\/span>\n<span class=\"line\">\t...<\/span>\n<span class=\"line\">\torder.Id = res.InsertedID.(primitive.ObjectID).Hex()<\/span>\n<span class=\"line\">\ts.Hub.Publish(eventhub.Message{<\/span>\n<span class=\"line\">\t\tName:   KeyOrderCreated, <span class=\"comment\">\/\/ order.create<\/span><\/span>\n<span class=\"line\">\t\tFields: eventhub.Fields{<span class=\"string\">\"id\"<\/span>: order.Id},<\/span>\n<span class=\"line\">    })<\/span>\n<span class=\"line\">    ...<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rkNRsXvxO   \" ><style>.tatsu-rkNRsXvxO .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rkNRsXvxO .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>Inside the resolver responsible for <code>orderCreated<\/code> queries, a subscription to the event bus is made once the user requests that subscription.<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-gn9s1vac0sc0hluw  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-gn9s1vac0sc0hluw.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-gn9s1vac0sc0hluw .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"params\">(r *Resolver)<\/span> <span class=\"title\">OrderCreated<\/span><span class=\"params\">(ctx context.Context)<\/span> <span class=\"params\">(<span class=\"keyword\">chan<\/span> *orderResolver, error)<\/span><\/span> {<\/span>\n<span class=\"line\">\tc := <span class=\"built_in\">make<\/span>(<span class=\"keyword\">chan<\/span> *orderResolver)<\/span>\n<span class=\"line\">\t<span class=\"keyword\">go<\/span> subscribeOrder(service.KeyOrderCreated, ctx, c)<\/span>\n<span class=\"line\">\t<span class=\"keyword\">return<\/span> c, <span class=\"literal\">nil<\/span><\/span>\n<span class=\"line\">}<\/span>\n\n<span class=\"line\"><span class=\"function\"><span class=\"keyword\">func<\/span> <span class=\"title\">subscribeOrder<\/span><span class=\"params\">(key <span class=\"keyword\">string<\/span>, ctx context.Context, c <span class=\"keyword\">chan<\/span> *orderResolver)<\/span><\/span> {<\/span>\n<span class=\"line\">\tsrv := ctx.Value(service.KeyOrderService).(*service.OrderService)<\/span>\n<span class=\"line\">\tsub := srv.Hub.NonBlockingSubscribe(<span class=\"number\">10<\/span>, key)<\/span>\n\n<span class=\"line\">\t<span class=\"keyword\">defer<\/span> <span class=\"function\"><span class=\"keyword\">func<\/span><span class=\"params\">()<\/span><\/span> {<\/span>\n<span class=\"line\">\t\tsrv.Hub.Unsubscribe(sub)<\/span>\n<span class=\"line\">\t\t<span class=\"built_in\">close<\/span>(c)<\/span>\n<span class=\"line\">\t}()<\/span>\n\n<span class=\"line\">\t<span class=\"keyword\">for<\/span> {<\/span>\n<span class=\"line\">\t\t<span class=\"keyword\">select<\/span> {<\/span>\n<span class=\"line\">\t\t<span class=\"keyword\">case<\/span> <-ctx.Done():<\/span>\n<span class=\"line\">\t\t\t<span class=\"keyword\">return<\/span><\/span>\n<span class=\"line\">\t\t<span class=\"keyword\">case<\/span> m := <-sub.Receiver:<\/span>\n<span class=\"line\">\t\t\t<span class=\"keyword\">if<\/span> u, err := srv.Get(m.Fields[<span class=\"string\">\"id\"<\/span>].(<span class=\"keyword\">string<\/span>)); err != <span class=\"literal\">nil<\/span> {<\/span>\n<span class=\"line\">\t\t\t\tlog.Println(err)<\/span>\n<span class=\"line\">\t\t\t} <span class=\"keyword\">else<\/span> {<\/span>\n<span class=\"line\">\t\t\t\tc <- &#038;orderResolver{u}<\/span>\n<span class=\"line\">\t\t\t}<\/span>\n<span class=\"line\">\t\t}<\/span>\n<span class=\"line\">\t}<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BJRL2XwlO   \" ><style>.tatsu-BJRL2XwlO .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BJRL2XwlO .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>When a new order is inserted via the respective service, the above method is triggered as a consequence of being subscribed to <code>order.create<\/code> events. It reads the orer\u2019s ID from the event, uses the qualified service to fetch it from the database and passes it on to an <code>orderResolver<\/code> to translate it into the schema-conformal format.<\/p>\n<p>The HTTP handler, which dispatched the user\u2019s GraphQL query to the above resolver, in turn, has subscribed to the result Go channel and writes every incoming <code>Order<\/code> instance to always-open HTTP stream (see <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/e8e5c24ea413aa078e3c6816a5a85f7337209091\/middleware\/graphql.go#L59\" target=\"_blank\" rel=\"noopener\">middleware\/graphql.go<\/a>):<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-SypfpQDgd  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-SypfpQDgd.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-SypfpQDgd .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\">...<\/span>\n<span class=\"line\">c, err := h.Schema.Subscribe(ctx, params.Query, params.OperationName, params.Variables)<\/span>\n<span class=\"line\">...<\/span>\n<span class=\"line\"><span class=\"keyword\">for<\/span> r := <span class=\"keyword\">range<\/span> c {<\/span>\n<span class=\"line\">        response := r.(*graphql.Response)<\/span>\n<span class=\"line\">        responseJSON, err := json.Marshal(response)<\/span>\n<span class=\"line\">        ...<\/span>\n<span class=\"line\">        fmt.Fprintf(w, <span class=\"string\">\"data: %snn\"<\/span>, responseJSON)<\/span>\n<span class=\"line\">        flusher.Flush()<\/span>\n<span class=\"line\">        ...<\/span>\n<span class=\"line\">}<\/span>\n<span class=\"line\">...<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vac251qa6x0   \" ><style>.tatsu-gn9s1vac251qa6x0 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vac251qa6x0 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Running Queries<\/h3>\n<\/div><\/div><div  class = \"tatsu-special-heading-wrap  tatsu-gn9te0vkdf7vsyem \"  \"  ><style>.tatsu-gn9te0vkdf7vsyem.tatsu-special-heading-wrap{font-size: 23px;margin: 0px 0px 10px 0px;text-align: left;}.tatsu-gn9te0vkdf7vsyem.tatsu-special-heading-wrap .tatsu-title{letter-spacing: 2px;}.tatsu-gn9te0vkdf7vsyem.tatsu-special-heading-wrap .tatsu-border{background: rgba(0,181,214,1);}<\/style><div class = \"special-heading-inner-wrap tatsu-border-style1\" ><div class = \"tatsu-border\" ><\/div><h6 class = \"tatsu-title\">Using GraphQL<\/h6><\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Hkefs7Dgu   \" ><style>.tatsu-Hkefs7Dgu .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Hkefs7Dgu .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>During development, queries against a GraphQL API can be issued using the interactive GraphiQL browser, as demonstrated here.<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-B1Lca7ved  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1280px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 56.25%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"graphiql browser\" data-src = \"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-content\/uploads\/2021\/02\/graphiql-browser.gif\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-B1Lca7ved .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-B1Lca7ved.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByyHTQwxO   \" ><style>.tatsu-ByyHTQwxO .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByyHTQwxO .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h2 id=\"Programatically\">Programatically<\/h2>\n<p>On the client-side of our application, GraphQL queries are run to consume the API. After all, any client, that is able to speak HTTP, can also consume a GraphQL API, as GraphQL requests are really just <code>POST<\/code> requests with a certain query in the body.<\/p>\n<p>For instance, the <a href=\"https:\/\/vuex.vuejs.org\/\" target=\"_blank\" rel=\"noopener\">Vuex<\/a> store action responsible for loading a list of products in the frontend is this (see <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/e8e5c24ea413aa078e3c6816a5a85f7337209091\/web\/src\/store\/products.js#L30\" target=\"_blank\" rel=\"noopener\">store\/products.js<\/a>):<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-HkGIp7DgO  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-HkGIp7DgO.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-HkGIp7DgO .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\"><span class=\"keyword\">async<\/span> <span class=\"function\"><span class=\"title\">fetchProducts<\/span>(<span class=\"params\">{commit}<\/span>)<\/span> {<\/span>\n<span class=\"line\">    <span class=\"keyword\">const<\/span> q = <span class=\"string\">`{<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        products() {<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        id<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        name<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        description<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        price<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        }<\/span><\/span>\n<span class=\"line\"><span class=\"string\">    }`<\/span><\/span>\n\n<span class=\"line\">    <span class=\"keyword\">const<\/span> data = <span class=\"keyword\">await<\/span> Vue.$api.graphql.request(q)<\/span>\n<span class=\"line\">    commit(<span class=\"string\">'addProducts'<\/span>, data.products.map(Product.new))<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vacbgfio6x2   \" ><style>.tatsu-gn9s1vacbgfio6x2 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vacbgfio6x2 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p>For subscriptions, we rely on a slightly <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/master\/web\/src\/vendor\/sse.js\" target=\"_blank\" rel=\"noopener\">modified version<\/a> of <a href=\"https:\/\/github.com\/mpetazzoni\/sse.js\" target=\"_blank\" rel=\"noopener\">sse.js<\/a>. It acts as a minimal wrapper around the browser\u2019s standard <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventSource\" target=\"_blank\" rel=\"noopener\">EventSource<\/a> and allows us to run SSE requests as <code>POST<\/code> (instead of <code>GET<\/code>) queries and pass some data in the body. We do so to fit well with GraphQL, where queries are always <code>POST<\/code> requests with a respective query body.<\/p>\n<p>Subscribing to new orders in the frontend is mostly done like this:<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-text-block-wrap tatsu-HJooi7Dx_  \"><div class=\"tatsu-text-inner tatsu-align-center  clearfix\" ><style>.tatsu-HJooi7Dx_.tatsu-text-block-wrap .tatsu-text-inner{width: 100%;text-align: left;background-color: rgba(49,49,49,1);padding: 0px 30px 10px 30px;color: #ffffff ;}.tatsu-HJooi7Dx_ .tatsu-text-inner *{color: #ffffff ;}<\/style>\n<pre><span class=\"line\"><span class=\"keyword\">async<\/span> <span class=\"function\"><span class=\"title\">subscribeOrderCreated<\/span>(<span class=\"params\">{commit}<\/span>)<\/span> {<\/span>\n<span class=\"line\">    <span class=\"keyword\">const<\/span> q = <span class=\"string\">`subscription {<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        orderCreated() {<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            id<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            queueId<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            createdAt<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            updatedAt<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            status<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            eta<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            totalSum<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            products {<\/span><\/span>\n<span class=\"line\"><span class=\"string\">                id<\/span><\/span>\n<span class=\"line\"><span class=\"string\">                name<\/span><\/span>\n<span class=\"line\"><span class=\"string\">            }<\/span><\/span>\n<span class=\"line\"><span class=\"string\">        }<\/span><\/span>\n<span class=\"line\"><span class=\"string\">    }`<\/span><\/span>\n\n<span class=\"line\">    <span class=\"keyword\">const<\/span> source = Vue.$api.sse.request(q, <span class=\"literal\">null<\/span>)<\/span>\n<span class=\"line\">    source.addEventListener(<span class=\"string\">'message'<\/span>, <span class=\"function\"><span class=\"params\">e<\/span> =><\/span> {<\/span>\n<span class=\"line\">        <span class=\"keyword\">const<\/span> payload = <span class=\"built_in\">JSON<\/span>.parse(e.data)<\/span>\n<span class=\"line\">        ...<\/span>\n<span class=\"line\">        commit(<span class=\"string\">'addOrder'<\/span>, <span class=\"keyword\">new<\/span> Order(payload.data.orderCreated))<\/span>\n<span class=\"line\">    })<\/span>\n<span class=\"line\">    ...<\/span>\n<span class=\"line\">    source.stream()<\/span>\n<span class=\"line\">}<\/span><\/pre>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vacdffelju4   \" ><style>.tatsu-gn9s1vacdffelju4 .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vacdffelju4 .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h2>Demo<\/h2>\n<p>And here&#8217;s a live demo in action!<\/p>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-S1teQ7wlu  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1280px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 56.25%;\" ><\/div><img class = \"tatsu-gradient-border\" alt = \"\" title = \"live demo\" data-src = \"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-content\/uploads\/2021\/02\/live-demo.gif\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/div><style>.tatsu-S1teQ7wlu .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-S1teQ7wlu.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1B1R7Pe_   \" ><style>.tatsu-H1B1R7Pe_ .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1B1R7Pe_ .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h2 id=\"Outlook\">Outlook<\/h2>\n<p>While the current demo implementation serves as a \u2013 in our opinion \u2013 clean and well-structured starting point for building GraphQL-based web apps, its current state has one major drawback. It lacks authentication and authorization. Usually, you want to control which user can query and modify which data. Therefore, another blog post will follow in the future, which explains how to authorize GraphQL query endpoints.<\/p>\n<p>Apart from that, we consider the present technology stack a promising choice for new web applications with the potential to facilitate clean, well-organized code and to make development easier, and more flexible<\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-gn9s1vace69810oe   \" ><style>.tatsu-gn9s1vace69810oe .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-gn9s1vace69810oe .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><span class=\"fs-s\"><em><span class=\"palette-2 fs-s\">Originally published at <\/span><a style=\"color: #1395b8;\" href=\"https:\/\/muetsch.io\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2.html\" target=\"_self\" rel=\"noopener\">muetsch.io<\/a> <span class=\"palette-2 fs-s\">on <time title=\"Monday, June 8, 2020, 2:00:00 AM\" datetime=\"2020-06-08T00:00:00Z\">Jun 06, 2020<\/time><\/span><\/em><\/span><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image tatsu-bg-lazyload\" data-src = \"\"><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-gn9s1vabfw5qa3c1.tatsu-column{width: 100%;}.tatsu-gn9s1vabfw5qa3c1.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-gn9s1vabfw5qa3c1 > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-gn9s1vabfw5qa3c1 > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-gn9s1vabfw5qa3c1 > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-gn9s1vabfw5qa3c1 > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-gn9s1vabfw5qa3c1.tatsu-column{width: 100%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-gn9s1vabfw5qa3c1.tatsu-column{width: 100%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-gn9s1vabfw5qa3c1.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background tatsu-bg-lazyload\" data-src = \"\"><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-gn9s1vabb059y499 .tatsu-section-pad{padding: 1px 0px 90px 0px;}.tatsu-gn9s1vabb059y499 .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-gn9s1vabb059y499 > .tatsu-bottom-divider{z-index: 9999;}.tatsu-gn9s1vabb059y499 > .tatsu-top-divider{z-index: 9999;}.tatsu-gn9s1vabb059y499 .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/prototype.staging.dev.frachtwerk.de\/allgemein\/modern-reactive-web-apis-2\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":11,"featured_media":7532,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[]},"categories":[1,50,11],"tags":[],"_links":{"self":[{"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/posts\/7528"}],"collection":[{"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/comments?post=7528"}],"version-history":[{"count":10,"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/posts\/7528\/revisions"}],"predecessor-version":[{"id":9290,"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/posts\/7528\/revisions\/9290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/media\/7532"}],"wp:attachment":[{"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/media?parent=7528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/categories?post=7528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prototype.staging.dev.frachtwerk.de\/wp-json\/wp\/v2\/tags?post=7528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}