docs: Use GraphiQL in the Vendure docs (#3543)

docs/docs/guides/getting-started/graphql-intro/index.mdx

@@ -25,12 +25,12 @@ To put it simply: GraphQL allows you to fetch data from an API via _queries_, an
 Here's a GraphQL query which fetches the product with the slug "football":
 
 <Playground api="shop" document={`
-query {
-  product(slug: "football") {
-    id
-    name
-    slug
-  }
+query GetProduct {
+    product(slug: "football") {
+      id
+      name
+      slug
+    }
 }
 `} />
 
@@ -500,12 +500,12 @@ This is a GraphQL Playground running on a real Vendure server. You can run the q
 middle of the two panes.
 
 <Playground api="shop" document={`
-query {
-  product(slug: "football") {
-    id
-    name
-    slug
-  }
+query GetProduct {
+    product(slug: "football") {
+      id
+      name
+      slug
+    }
 }
 `} />
 

docs/docs/guides/getting-started/try-the-api/index.mdx

@@ -36,14 +36,14 @@ Let's start with a **query**. Queries are used to fetch data. We will make a que
 <Playground
     api="shop"
     document={`
-query {
-  products {
-    totalItems
-    items {
-      id
-      name
+query GetProducts {
+    products {
+      totalItems
+      items {
+        id
+        name
+      }
     }
-  }
 }
 `}
 />
@@ -56,20 +56,20 @@ Let's add a few more properties to the query:
 <Playground
     api="shop"
     document={`
-query {
-  products {
-    totalItems
-    items {
-      id
-      name
-      slug
-      description
-      featuredAsset {
+query GetProducts {
+    products {
+      totalItems
+      items {
         id
-        preview
+        name
+        slug
+        description
+        featuredAsset {
+          id
+          preview
+        }
       }
     }
-  }
 }
 `}
 />
@@ -85,14 +85,14 @@ after the query name. For example, let's fetch the first 5 products:
 <Playground
     api="shop"
     document={`
-query {
-  products(options: { take: 5 }) {
-    totalItems
-    items {
-      id
-      name
+query GetProducts {
+    products(options: { take: 5 }) {
+      totalItems
+      items {
+        id
+        name
+      }
     }
-  }
 }
 `}
 />
@@ -105,16 +105,20 @@ name:
 <Playground
     api="shop"
     document={`
-query {
-  products(options: {
-    filter: { name: { contains: "shoe" } }
-  }) {
-    totalItems
-    items {
-      id
-      name
+query GetProducts {
+    products(options: {
+      filter: {
+        name: {
+          contains: "shoe"
+        }
+      }
+    }) {
+      totalItems
+      items {
+        id
+        name
+      }
     }
-  }
 }
 `}
 />
@@ -128,26 +132,26 @@ Here's a mutation which adds a product to an order:
 <Playground
     api="shop"
     document={`
-mutation {
-  addItemToOrder(productVariantId: 42, quantity: 1) {
-    ...on Order {
-      id
-      code
-      totalQuantity
-      totalWithTax
-      lines {
-        productVariant {
-          name
+mutation AddItemToOrder {
+    addItemToOrder(productVariantId: 42, quantity: 1) {
+      ...on Order {
+        id
+        code
+        totalQuantity
+        totalWithTax
+        lines {
+          productVariant {
+            name
+          }
+          quantity
+          linePriceWithTax
         }
-        quantity
-        linePriceWithTax
+      }
+      ...on ErrorResult {
+        errorCode
+        message
       }
     }
-    ...on ErrorResult {
-      errorCode
-      message
-    }
-  }
 }
 `}
 />
@@ -180,7 +184,7 @@ Open the GraphiQL Admin API interface at [http://localhost:3000/graphiql/admin](
 Most Admin API operations are restricted to authenticated users. So first of all we'll need to log in.
 
 ```graphql title="Admin API"
-mutation {
+mutation Login {
     login(username: "superadmin", password: "superadmin") {
         ... on CurrentUser {
             id
@@ -199,7 +203,7 @@ mutation {
 The Admin API exposes a lot more information about products than you can get from the Shop API:
 
 ```graphql title="Admin API"
-query {
+query GetProduct {
   product(id: 42) {
     // highlight-next-line
     enabled

docs/src/components/Playground/index.tsx

@@ -15,7 +15,7 @@ export default function Playground(props: {
                 minHeight: props.minHeight ?? '500px',
                 borderRadius: '8px',
             }}
-            src={`https://${props.server ?? 'readonlydemo'}.vendure.io/${props.api}-api?query=${urlEncoded}`}
+            src={`https://${props.server ?? 'readonlydemo'}.vendure.io/graphiql/${props.api}?embeddedMode=true&query=${urlEncoded}`}
         />
     );
 }

docs/src/pages/index.tsx

@@ -55,6 +55,7 @@ export default function Home(): JSX.Element {
                     <Playground
                         api={'shop'}
                         minHeight="800px"
+                        server={'readonlydemo'}
                         document={`
 query GetProductList {
   products(