From a0667eba9d7f7072589e0ff77de58d67f6c16293 Mon Sep 17 00:00:00 2001
From: Jens Neuse <jens.neuse@gmx.de>
Date: Fri, 11 Nov 2022 15:06:48 +0100
Subject: [PATCH] feat: add wundergraph to gateway section

---
 gatsby-node.js                           |  1 +
 src/content/code/gateways/wundergraph.md | 86 ++++++++++++++++++++++++
 src/content/code/slug-map.json           |  3 +-
 src/pages/code.tsx                       | 12 ++++
 4 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 src/content/code/gateways/wundergraph.md

diff --git a/gatsby-node.js b/gatsby-node.js
index 38c5ff9dde..2a61344d11 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -183,6 +183,7 @@ exports.onCreatePage = async ({ page, actions }) => {
       otherLibraries: {
         Services: codeData.Services,
         Tools: sortedTools,
+        Gateways: codeData.Gateways,
         "More Stuff": codeData["More Stuff"],
       },
       languageList: languageList.sort((a, b) => {
diff --git a/src/content/code/gateways/wundergraph.md b/src/content/code/gateways/wundergraph.md
new file mode 100644
index 0000000000..5715eb2a84
--- /dev/null
+++ b/src/content/code/gateways/wundergraph.md
@@ -0,0 +1,86 @@
+---
+name: WunderGraph
+description: WunderGraph is an open-source GraphQL Gateway that is able to compose Apollo Federation, GraphQL, REST APIs, Databases, Kafka and more.
+url: https://wundergraph.com
+github: wundergraph/wundergraph
+---
+[WunderGraph](https://wundergraph.com) composes all your APIs into a single unified GraphQL API and 
+allows you to expose your Graph as a [secure and type-safe JSON-RPC API](https://docs.wundergraph.com/docs/features/graphql-to-json-rpc-compiler).
+
+To get started with WunderGraph, you can use `create-wundergraph-app` to bootstrap a new project:
+
+```bash
+npx create-wundergraph-app my-project -E nextjs-swr
+```
+
+On the client side, WunderGraph's JSON-RPC API integrates very well with frameworks like [Next.js, SWR](https://github.com/wundergraph/wundergraph/tree/main/examples/nextjs-swr) and React Query,
+while one the backend, we're able to leverage the power of "Server-Side-Only GraphQL".
+Handle authentication, authorization, validation, joins and more right in the Query Layer.
+
+```graphql
+mutation (
+  $name: String! @fromClaim(name: NAME)
+  $email: String! @fromClaim(name: EMAIL)
+  $message: String! @jsonSchema(pattern: "^[a-zA-Z 0-9]+$")
+) {
+  createOnepost(
+    data: {
+      message: $message
+      user: {
+        connectOrCreate: {
+          where: { email: $email }
+          create: { email: $email, name: $name }
+        }
+      }
+    }
+  ) {
+    id
+    message
+    user {
+      id
+      name
+    }
+  }
+}
+```
+
+The Query above requires the user to be authenticated,
+injects the user's name and email from the JWT token and validates the message against a JSON Schema.
+
+Here's another example showcasing how we can use Server-Side GraphQL with WunderGraph's unique [join capabilities](https://docs.wundergraph.com/docs/features/cross-api-joins-to-compose-apis),
+composing data from two different APIs into a single GraphQL response.
+
+```graphql
+query (
+  $continent: String!
+  # the @internal directive removes the $capital variable from the public API
+  # this means, the user can't set it manually
+  # this variable is our JOIN key
+  $capital: String! @internal
+) {
+  countries_countries(filter: { continent: { eq: $continent } }) {
+    code
+    name
+    # using the @export directive, we can export the value of the field `capital` into the JOIN key ($capital)
+    capital @export(as: "capital")
+    # the _join field returns the type Query!
+    # it exists on every object type so you can everywhere in your Query documents
+    _join {
+      # once we're inside the _join field, we can use the $capital variable to join the weather API
+      weather_getCityByName(name: $capital) {
+        weather {
+          temperature {
+            max
+          }
+          summary {
+            title
+            description
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+The full [example can be found on GitHub](https://github.com/wundergraph/wundergraph/tree/main/examples/cross-api-joins).
\ No newline at end of file
diff --git a/src/content/code/slug-map.json b/src/content/code/slug-map.json
index a4895135eb..f195de8595 100644
--- a/src/content/code/slug-map.json
+++ b/src/content/code/slug-map.json
@@ -26,5 +26,6 @@
   "client": "Client",
   "server": "Server",
   "tools": "Tools",
-  "services": "Services"
+  "services": "Services",
+  "gateways": "Gateways"
 }
diff --git a/src/pages/code.tsx b/src/pages/code.tsx
index 09b26ae0db..3e3fb437f1 100644
--- a/src/pages/code.tsx
+++ b/src/pages/code.tsx
@@ -147,6 +147,7 @@ const categorySlugMap = [
   ["Server", toSlug("Server")],
   ["Client", toSlug("Client")],
   ["Tools", toSlug("Tools")],
+  ["Gateways", toSlug("Gateways")],
 ]
 
 export function buildLanguagesContent(pageContext: any) {
@@ -228,6 +229,9 @@ export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>)
                   <AnchorLink to="#services" title="Services">
                     <h3>Services</h3>
                   </AnchorLink>
+                  <AnchorLink to="#gateways" title="Gateways">
+                    <h3>Gateways</h3>
+                  </AnchorLink>
                 </div>
               </div>
             </div>
@@ -253,6 +257,14 @@ export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>)
               </AnchorLink>
             </h2>
             {buildLibraryList(pageContext.otherLibraries?.Services ?? [], pageContext)}
+            <h2>
+              <a className="anchor" id="gateways"></a>
+              Gateways
+              <AnchorLink className="hash-link" to="#gateways">
+                #
+              </AnchorLink>
+            </h2>
+            {buildLibraryList(pageContext.otherLibraries?.Gateways ?? [], pageContext)}
           </div>
         </div>
       <p>Want to improve this page? See the <a href="https://github.com/graphql/graphql.github.io/blob/source/notes/ContributingToCodePage.md">docs here</a>.</p>