{"id":2495,"date":"2021-02-02T20:33:00","date_gmt":"2021-02-02T19:33:00","guid":{"rendered":"https:\/\/frachtwerk.fw-web.space\/?p=2495"},"modified":"2024-09-10T13:56:39","modified_gmt":"2024-09-10T13:56:39","slug":"modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2","status":"publish","type":"post","link":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/","title":{"rendered":"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2"},"content":{"rendered":"\n<p>In the <a href=\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-1\/\">previous<\/a> part, concepts and benefits of GraphQL and <a href=\"https:\/\/graphql.org\/blog\/subscriptions-in-graphql-and-relay\/\">GraphQL Subscriptions<\/a> were presented and proposed as a modern, highly flexible alternative for designing web APIs.<\/p>\n\n\n\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\n\n\n<p>&gt;&nbsp;<strong>Code<\/strong>:&nbsp;<a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\" target=\"_blank\" rel=\"noreferrer noopener\">muety\/go-graphql-sse-example<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"279\" src=\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2020\/06\/o_auto-1024x279.webp\" alt=\"\" class=\"wp-image-2498\" srcset=\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2020\/06\/o_auto-1024x279.webp 1024w, https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2020\/06\/o_auto-300x82.webp 300w, https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2020\/06\/o_auto-768x209.webp 768w, https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2020\/06\/o_auto.webp 1102w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">What to build?<\/h2>\n\n\n\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=\"noreferrer 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=\"noreferrer noopener\">Server-Sent Events<\/a>.<br>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\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"722\" src=\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/demo-web-app-1024x722.png\" alt=\"\" class=\"wp-image-3901\" srcset=\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/demo-web-app-1024x722.png 1024w, https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/demo-web-app-300x211.png 300w, https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/demo-web-app-768x541.png 768w, https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/demo-web-app-1536x1082.png 1536w, https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/demo-web-app-2048x1443.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Technology Stack<\/h2>\n\n\n\n<p>In summary, the following technologies are used:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/golang.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go<\/a> as the primary backend-side language<\/li>\n\n\n\n<li><a href=\"https:\/\/graphql.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">GraphQL<\/a> as a \u201cprotocol\u201d for defining web interfaces<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\" target=\"_blank\" rel=\"noreferrer 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=\"noreferrer noopener\">GraphQL Subscriptions<\/a> here<\/li>\n\n\n\n<li><a href=\"https:\/\/www.mongodb.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">MongoDB<\/a> as a flexible document database for storage<\/li>\n\n\n\n<li><a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">VueJS<\/a> as a frontend framework to build single-page web applications<\/li>\n<\/ul>\n\n\n\n<p>In addition, <a href=\"https:\/\/www.npmjs.com\/package\/graphql-request\" target=\"_blank\" rel=\"noreferrer 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=\"noreferrer noopener\">Fetch API<\/a>.<\/p>\n\n\n\n<p>On the backend side, GraphQL development is facilitated by the excellent <a href=\"https:\/\/github.com\/graph-gophers\/graphql-go\" target=\"_blank\" rel=\"noreferrer noopener\">graphql-go<\/a> package, which already provides well-defined guidelines to get started (thanks to the authors!).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Data Model<\/h2>\n\n\n\n<p>With GraphQL, you need to specify a <a href=\"https:\/\/graphql.org\/learn\/schema\/\" target=\"_blank\" rel=\"noreferrer 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 .graphql files.<\/p>\n\n\n\n<p>Every GraphQL app consists of root types, defining all supported queries, mutations, and subscriptions as well as entity types.<\/p>\n\n\n\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=\"noreferrer noopener\">schema\/schema.graphql<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>schema {\n    query: Query\n    mutation: Mutation\n    subscription: Subscription\n}\n\ntype Query {\n    product(id: ID!): Product\n    products(): &#91;Product]\n    order(id: ID!): Order\n    orders(status: String): &#91;Order]\n}\n\ntype Mutation {\n    createOrder(order: OrderInput!): Order\n    updateOrder(order: OrderUpdateInput!): Order\n}\n\ntype Subscription {\n    orderCreated(): Order\n    orderChanged(id: ID!): Order\n}<\/code><\/pre>\n\n\n\n<p>The type definition for the Product 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\">schema\/type\/product.graphql<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type Product {\n    id: ID!\n    name: String\n    description: String\n    price: Float\n}<\/code><\/pre>\n\n\n\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\">repository<\/a>.<br>After having defined your schema, in the case of <a href=\"https:\/\/github.com\/graph-gophers\/graphql-go\">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\">server.go<\/a>) and served via an HTTP endpoint. Pretty straightforward!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>graphqlSchema := graphql.MustParseSchema(schema.GetRootSchema(), &amp;resolver.Resolver{})\n\nhttp.Handle(\"\/api\/query\", middleware.AddContext(ctx, &amp;middleware.GraphQL{Schema: graphqlSchema}))<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resolvers<\/h2>\n\n\n\n<p>After having defined and loaded the schema, so-called <a href=\"https:\/\/graphql.org\/learn\/execution\/#root-fields-resolvers\" target=\"_blank\" rel=\"noreferrer 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 ID, name, description, and price fields. Such fields can be literals, as it is the case with all fields of the Product type, but also other nested entities, like in the products field of the following Order type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type Order {\n    id: ID!\n    ...\n    products: &#91;Product]\n}<\/code><\/pre>\n\n\n\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 products, the orderResolver will ask a productResolver to do its respective duty.<\/p>\n\n\n\n<p>When working with go-graphql, a simple resolver looks like this (<a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/master\/resolver\/product.go\">resolvers\/product.go<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type productResolver struct {\n\tp *model.Product\n}\n\nfunc (r *productResolver) Id() graphql.ID {\n\treturn graphql.ID(r.p.Id)\n}\n\nfunc (r *productResolver) Name() *string {\n\treturn &amp;r.p.Name\n}\n\nfunc (r *productResolver) Description() *string {\n\treturn &amp;r.p.Description\n}\n\nfunc (r *productResolver) Price() *float64 {\n\treturn &amp;r.p.Price\n}<\/code><\/pre>\n\n\n\n<p>Very simple. It is instantiated with a reference to a Product 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 firstName and lastName fields, while your GraphQL type only has name. In that case, the resolver would have to do some basic concatenation.<\/p>\n\n\n\n<p>Things get a little more complex when dealing with non-literal fields, like the Order&#8217;s products above. In our database schema, an order only holds a list of product IDs as items. 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 productResolvers (see <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/blob\/e8e5c24ea413aa078e3c6816a5a85f7337209091\/resolver\/order.go#L53\" target=\"_blank\" rel=\"noreferrer noopener\">resolvers\/order.go<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>...\nfunc (r *orderResolver) Products(ctx context.Context) (*&#91;]*productResolver, error) {\n\tl := make(&#91;]*productResolver, len(r.o.Items))\n\n\tproducts, err := ctx.Value(service.KeyProductService).(*service.ProductService).GetBatchMap(r.o.Items)\n\tif err != nil {\n\t\treturn nil, err\n\t}\n\n\tfor i, id := range r.o.Items {\n\t\tl&#91;i] = &amp;productResolver{p: products&#91;id]}\n\t}\n\n\treturn &amp;l, nil\n}\n...<\/code><\/pre>\n\n\n\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=\"noreferrer noopener\">repo<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Subscriptions<\/h2>\n\n\n\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\n\n\n<p>On the backend side, we introduce a light-weight <a href=\"https:\/\/github.com\/leandro-lugaresi\/hub\" target=\"_blank\" rel=\"noreferrer noopener\">event bus<\/a> to our <a href=\"https:\/\/github.com\/muety\/go-graphql-sse-example\/tree\/master\/service\" target=\"_blank\" rel=\"noreferrer 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=\"noreferrer noopener\">services\/order.go<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>func (s *OrderService) Create(order *model.Order) (*model.Order, error) {\n\t...\n\torder.Id = res.InsertedID.(primitive.ObjectID).Hex()\n\ts.Hub.Publish(eventhub.Message{\n\t\tName:   KeyOrderCreated, \/\/ order.create\n\t\tFields: eventhub.Fields{\"id\": order.Id},\n    })\n    ...\n}<\/code><\/pre>\n\n\n\n<p>Inside the resolver responsible for orderCreated queries, a subscription to the event bus is made once the user requests that subscription.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>func (r *Resolver) OrderCreated(ctx context.Context) (chan *orderResolver, error) {\n\tc := make(chan *orderResolver)\n\tgo subscribeOrder(service.KeyOrderCreated, ctx, c)\n\treturn c, nil\n}\n\nfunc subscribeOrder(key string, ctx context.Context, c chan *orderResolver) {\n\tsrv := ctx.Value(service.KeyOrderService).(*service.OrderService)\n\tsub := srv.Hub.NonBlockingSubscribe(10, key)\n\n\tdefer func() {\n\t\tsrv.Hub.Unsubscribe(sub)\n\t\tclose(c)\n\t}()\n\n\tfor {\n\t\tselect {\n\t\tcase &lt;-ctx.Done():\n\t\t\treturn\n\t\tcase m := &lt;-sub.Receiver:\n\t\t\tif u, err := srv.Get(m.Fields&#91;\"id\"].(string)); err != nil {\n\t\t\t\tlog.Println(err)\n\t\t\t} else {\n\t\t\t\tc &lt;- &amp;orderResolver{u}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<p>When a new order is inserted via the respective service, the above method is triggered as a consequence of being subscribed to order.create 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 orderResolver to translate it into the schema-conformal format.<\/p>\n\n\n\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 Order 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=\"noreferrer noopener\">middleware\/graphql.go<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>...\nc, err := h.Schema.Subscribe(ctx, params.Query, params.OperationName, params.Variables)\n...\nfor r := range c {\n        response := r.(*graphql.Response)\n        responseJSON, err := json.Marshal(response)\n        ...\n        fmt.Fprintf(w, \"data: %snn\", responseJSON)\n        flusher.Flush()\n        ...\n}\n...<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Running Queries<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Using GraphQL<\/h3>\n\n\n\n<p>During development, queries against a GraphQL API can be issued using the interactive GraphiQL browser, as demonstrated here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/graphiql-browser.gif\" alt=\"\" class=\"wp-image-3902\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Programmatically<\/h2>\n\n\n\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 POST requests with a certain query in the body.<\/p>\n\n\n\n<p>For instance, the <a href=\"https:\/\/vuex.vuejs.org\/\" target=\"_blank\" rel=\"noreferrer 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=\"noreferrer noopener\">store\/products.js<\/a>):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async fetchProducts({commit}) {\n    const q = `{\n        products() {\n        id\n        name\n        description\n        price\n        }\n    }`\n\n    const data = await Vue.$api.graphql.request(q)\n    commit('addProducts', data.products.map(Product.new))\n}<\/code><\/pre>\n\n\n\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=\"noreferrer noopener\">modified version<\/a> of <a href=\"https:\/\/github.com\/mpetazzoni\/sse.js\" target=\"_blank\" rel=\"noreferrer 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=\"noreferrer noopener\">EventSource<\/a> and allows us to run SSE requests as POST (instead of GET) queries and pass some data in the body. We do so to fit well with GraphQL, where queries are always POST requests with a respective query body.<\/p>\n\n\n\n<p>Subscribing to new orders in the frontend is mostly done like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async subscribeOrderCreated({commit}) {\n    const q = `subscription {\n        orderCreated() {\n            id\n            queueId\n            createdAt\n            updatedAt\n            status\n            eta\n            totalSum\n            products {\n                id\n                name\n            }\n        }\n    }`\n\n    const source = Vue.$api.sse.request(q, null)\n    source.addEventListener('message', e =&gt; {\n        const payload = JSON.parse(e.data)\n        ...\n        commit('addOrder', new Order(payload.data.orderCreated))\n    })\n    ...\n    source.stream()\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Demo<\/h2>\n\n\n\n<p>And here\u2019s a live demo in action!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2021\/02\/live-demo.gif\" alt=\"\" class=\"wp-image-3903\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Outlook<\/h2>\n\n\n\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\n\n\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\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Originally published at <a href=\"https:\/\/muetsch.io\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2.html\" target=\"_blank\" rel=\"noopener\">muetsch.io<\/a> on Jun 06, 2020<\/p>\n","protected":false},"author":1,"featured_media":2448,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-2495","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-success-stories"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2 - Frachtwerk<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2 - Frachtwerk\" \/>\n<meta property=\"og:description\" content=\"Originally published at muetsch.io on Jun 06, 2020\" \/>\n<meta property=\"og:url\" content=\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Frachtwerk\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-02T19:33:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T13:56:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#\/schema\/person\/96e9e3f0a68613ecaf35993f6cb4efd3\"},\"headline\":\"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2\",\"datePublished\":\"2021-02-02T19:33:00+00:00\",\"dateModified\":\"2024-09-10T13:56:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/\"},\"wordCount\":1313,\"publisher\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#organization\"},\"image\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif\",\"articleSection\":[\"Success Stories\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/\",\"url\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/\",\"name\":\"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2 - Frachtwerk\",\"isPartOf\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif\",\"datePublished\":\"2021-02-02T19:33:00+00:00\",\"dateModified\":\"2024-09-10T13:56:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage\",\"url\":\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif\",\"contentUrl\":\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/frachtwerk.fw-web.space\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#website\",\"url\":\"https:\/\/frachtwerk.fw-web.space\/\",\"name\":\"Frachtwerk\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/frachtwerk.fw-web.space\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#organization\",\"name\":\"Frachtwerk\",\"url\":\"https:\/\/frachtwerk.fw-web.space\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/08\/logo.svg\",\"contentUrl\":\"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/08\/logo.svg\",\"caption\":\"Frachtwerk\"},\"image\":{\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/frachtwerk.fw-web.space\/#\/schema\/person\/96e9e3f0a68613ecaf35993f6cb4efd3\",\"name\":\"admin\",\"sameAs\":[\"https:\/\/frachtwerk.fw-web.space\"],\"url\":\"https:\/\/frachtwerk.fw-web.space\/author\/julian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2 - Frachtwerk","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/","og_locale":"de_DE","og_type":"article","og_title":"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2 - Frachtwerk","og_description":"Originally published at muetsch.io on Jun 06, 2020","og_url":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/","og_site_name":"Frachtwerk","article_published_time":"2021-02-02T19:33:00+00:00","article_modified_time":"2024-09-10T13:56:39+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif","type":"image\/gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"9 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#article","isPartOf":{"@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/"},"author":{"name":"admin","@id":"https:\/\/frachtwerk.fw-web.space\/#\/schema\/person\/96e9e3f0a68613ecaf35993f6cb4efd3"},"headline":"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2","datePublished":"2021-02-02T19:33:00+00:00","dateModified":"2024-09-10T13:56:39+00:00","mainEntityOfPage":{"@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/"},"wordCount":1313,"publisher":{"@id":"https:\/\/frachtwerk.fw-web.space\/#organization"},"image":{"@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif","articleSection":["Success Stories"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/","url":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/","name":"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2 - Frachtwerk","isPartOf":{"@id":"https:\/\/frachtwerk.fw-web.space\/#website"},"primaryImageOfPage":{"@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage"},"image":{"@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif","datePublished":"2021-02-02T19:33:00+00:00","dateModified":"2024-09-10T13:56:39+00:00","breadcrumb":{"@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#primaryimage","url":"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif","contentUrl":"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/05\/graphql_screencast2.gif","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/frachtwerk.fw-web.space\/modern-reactive-web-apis-with-graphql-go-and-server-sent-events-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/frachtwerk.fw-web.space\/"},{"@type":"ListItem","position":2,"name":"Modern, reactive web APIs with GraphQL, Go and Server-Sent Events \u2013 Part 2"}]},{"@type":"WebSite","@id":"https:\/\/frachtwerk.fw-web.space\/#website","url":"https:\/\/frachtwerk.fw-web.space\/","name":"Frachtwerk","description":"","publisher":{"@id":"https:\/\/frachtwerk.fw-web.space\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/frachtwerk.fw-web.space\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/frachtwerk.fw-web.space\/#organization","name":"Frachtwerk","url":"https:\/\/frachtwerk.fw-web.space\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/frachtwerk.fw-web.space\/#\/schema\/logo\/image\/","url":"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/08\/logo.svg","contentUrl":"https:\/\/frachtwerk.fw-web.space\/wp-content\/uploads\/2024\/08\/logo.svg","caption":"Frachtwerk"},"image":{"@id":"https:\/\/frachtwerk.fw-web.space\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/frachtwerk.fw-web.space\/#\/schema\/person\/96e9e3f0a68613ecaf35993f6cb4efd3","name":"admin","sameAs":["https:\/\/frachtwerk.fw-web.space"],"url":"https:\/\/frachtwerk.fw-web.space\/author\/julian\/"}]}},"_links":{"self":[{"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/posts\/2495"}],"collection":[{"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/comments?post=2495"}],"version-history":[{"count":12,"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/posts\/2495\/revisions"}],"predecessor-version":[{"id":4381,"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/posts\/2495\/revisions\/4381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/media\/2448"}],"wp:attachment":[{"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/media?parent=2495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/categories?post=2495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frachtwerk.fw-web.space\/wp-json\/wp\/v2\/tags?post=2495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}