tailcallhq · meskill · Dec 27, 2024 · Dec 27, 2024 · Dec 27, 2024 · Dec 27, 2024
diff --git a/blog/graphql-angular-clients-2024-07-20.md b/blog/graphql-angular-clients-2024-07-20.md
@@ -75,13 +75,6 @@ Create a `tailcall` directory in the project root and add a jsonplaceholder.grap
 
 ```graphql
 # File: tailcall/jsonplaceholder.graphql
-
-schema
-  @server(port: 8000, hostname: "0.0.0.0")
-  @upstream(httpCache: 42) {
-  query: Query
-}
-
 type Query {
   posts: [Post]
     @http(url: "http://jsonplaceholder.typicode.com/posts")

diff --git a/blog/graphql-introspection-security-2024-7-12.md b/blog/graphql-introspection-security-2024-7-12.md
@@ -78,13 +78,10 @@ Disabling introspection in production is crucial because it significantly reduce
 
 In many GraphQL implementations, disabling introspection is straightforward. For example, in [Tailcall](https://tailcall.run/docs/server-directive/#introspection), you can disable introspection by setting the `introspection` option to `false`:
 
-```graphql
-schema
+```yaml
+server:
   # highlight-next-line
-  @server(introspection: false) {
-  query: Query
-  mutation: Mutation
-}
+  introspection: false
 ```
 
 This configuration ensures that introspection is disabled.

diff --git a/blog/graphql-vue-clients-2024-08-01.md b/blog/graphql-vue-clients-2024-08-01.md
@@ -56,13 +56,6 @@ Then, create a `jsonplaceholder.graphql` file in this directory:
 
 ```graphql
 # File: tailcall/jsonplaceholder.graphql
-
-schema
-  @server(port: 8000, hostname: "0.0.0.0")
-  @upstream(httpCache: 42) {
-  query: Query
-}
-
 type Query {
   posts: [Post]
     @http(url: "http://jsonplaceholder.typicode.com/posts")

diff --git a/docs/N+1.md b/docs/N+1.md
@@ -6,6 +6,9 @@ sidebar_label: N+1 Identification
 image: /images/docs/n+1-issue.png
 ---
 
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
 <head>
 <meta property="og:type" content="article"/>
   <title>Detect and Solve GraphQL N+1 problem</title>
@@ -178,14 +181,19 @@ If you run the query, at first you will observe a lot of duplicate requests are
 
 This happens because of the 100 posts, a lot them are authored by the same user and by default Tailcall will make a request for every user when requested. You can fix this by setting [dedupe](./directives/graphQL.md#dedupe) to `true` in [server](./config/server.md).
 
-```graphql {3}
-schema
-  @server(
+<Tabs>
+  <TabItem value="config" label="main.yaml">
+
+```yaml
+server:
   dedupe: true
-  port: 8000) {
-  query: Query
-}
+```
+
+  </TabItem>
+
+  <TabItem value="schema" label="main.graphql">
 
+```graphql
 type Query {
   # ...
 }
@@ -199,6 +207,9 @@ type User {
 }
 ```
 
+  </TabItem>
+</Tabs>
+
 When you enable `dedupe`, for each downstream request, Tailcall will automatically using a dataloader deduplicate all upstream requests and instead of making 100 it will only make 10 requests for unique users:
 
 ```text {6-16}
@@ -322,11 +333,7 @@ The described changes introduce two significant tweaks to the `@http` directive:
 
 Let's see what the server logs when you now start Tailcall with the updated configuration:
 
-```graphql {21-22}
-schema @server(port: 8000) {
-  query: Query
-}
-
+```graphql
 type Query {
   posts: [Post]
     @http(url: "http://jsonplaceholder.typicode.com/posts")
@@ -341,7 +348,9 @@ type Post {
     @http(
       url: "http://jsonplaceholder.typicode.com/users"
       query: [{key: "id", value: "{{.value.userId}}"}]
+      #highlight-start
       batchKey: ["id"]
+      #highlight-end
     )
 }
 

diff --git a/docs/apollo-studio.md b/docs/apollo-studio.md
@@ -5,6 +5,9 @@ slug: integrate-apollo-studio-graphql-tailcall
 sidebar_label: Apollo Studio
 ---
 
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
 This guide illustrates how to configure `tailcall` to send usage metrics to [Apollo Studio](https://studio.apollographql.com).
 
 ## Creating a monolith graph
@@ -42,20 +45,28 @@ To see the metrics for you queries follow these instructions:
 
 1. Start `tailcall` with the appropriate configuration for Apollo (click [here](/docs/cli.md#start) to know more). Below is an example of what a config may look like:
 
-   ```graphql
-   schema
-     @server(port: 8000)
-     @telemetry(
-       export: {
-         apollo: {
-           apiKey: "<APOLLO_API_KEY from Apollo Website>"
-           graphRef: "<APOLLO_GRAPH_REF from Apollo Website>"
-         }
-       }
-     ) {
-     query: Query
-   }
+   <Tabs>
+   <TabItem value="config" label="main.yaml">
 
+   ```yaml
+   server:
+     port: 8000
+
+   telemetry:
+     export:
+       apollo:
+         apiKey: "<APOLLO_API_KEY from Apollo Website>"
+         graphRef: "<APOLLO_GRAPH_REF from Apollo Website>"
+
+   links:
+     - src: main.graphql
+   ```
+
+   </TabItem>
+
+   <TabItem value="schema" label="main.graphql">
+
+   ```graphql
    type Query {
      posts: [Post]
        @http(
@@ -71,6 +82,9 @@ To see the metrics for you queries follow these instructions:
    }
    ```
 
+   </TabItem>
+   </Tabs>
+
 1. Visit `http://localhost:8000/graphql` and create a query with an appropriate name (below is an example query named `MyQuery`) and run it multiple times to send the metrics to Apollo Studio.
 
    :::tip

diff --git a/docs/auth.md b/docs/auth.md
@@ -5,6 +5,9 @@ slug: field-level-access-control-graphql-authentication
 sidebar_label: Authentication
 ---
 
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
 This guide will walk you through entity level authentication in GraphQL and how it could be achieved with Tailcall.
 
 ## What is Authentication?
@@ -46,23 +49,34 @@ to know more about how to use it, read the following articles:
 
 Enabling support for authentication in Tailcall could be done in two steps:
 
-1. With the help of [`@link` directive](./config/links.md) connect multiple authentication files as you need for different provides. To connect it use either [`Htpasswd`](./config/links.md#htpasswd) or [`Jwks`](./config/links.md#jwks) link type
+1. With the help of [`links` config](./config/links.md) connect multiple authentication files as you need for different provides. To connect it use either [`Htpasswd`](./config/links.md#htpasswd) or [`Jwks`](./config/links.md#jwks) link type
 2. Mark that some type of field requires authentication to be fetched with the help of [`@protected` directive](./directives/protected.md)
 
 Your config could look like this now:
 
-```graphql
-schema
-  @server(port: 8000)
+<Tabs>
+  <TabItem value="config" label="main.yaml">
+
+```yaml
+server:
+  port: 8000
+links:
+  - src: main.graphql
   #highlight-start
-  @link(id: "auth-basic", type: Htpasswd, src: "htpasswd")
-  @link(id: "auth-jwt", type: Jwks, src: "jwks.json") {
+  - id: auth-basic
+    type: Htpasswd
+    src: htpasswd
+  - id: auth-jwt
+    type: Jwks
+    src: jwks.json
   #highlight-end
+```
 
-  query: Query
-  mutation: Mutation
-}
+  </TabItem>
 
+  <TabItem value="schema" label="main.graphql">
+
+```graphql
 type Query {
   posts: [Post]
     @http(url: "http://jsonplaceholder.typicode.com/posts")
@@ -104,6 +118,9 @@ type Post {
 }
 ```
 
+  </TabItem>
+</Tabs>
+
 In that case the whole `User` type and `Post.body` are marked as protected and therefore requiring authentication to resolve its content. That means following points:
 
 - any query for `Post.body` will require authentication
@@ -270,25 +287,36 @@ Since this file stores secure information make sure to hash the password you use
 
 ### Basic Auth GraphQL Configuration
 
-To use Basic Auth you should first include htpasswd file generated from [Prerequisites](#prerequisites) with the help of [`@link` directive](./config/links.md#htpasswd).
+To use Basic Auth you should first include htpasswd file generated from [Prerequisites](#prerequisites) with the help of [`links` config](./config/links.md#htpasswd).
 
 We can use that file as an example for it that has data for `testuser:mypassword` credentials in encrypted format:
 
 ```plaintext title="htpasswd"
 testuser:$2y$10$wJ/mZDURcAOBIrswCAKFsO0Nk7BpHmWl/XuhF7lNm3gBAFH3ofsuu
 ```
 
-After adding `@link` you can use the [`@protected` directive](./directives/protected.md) to mark the fields that requiring success authentication to be requested.
+After adding `links` you can use the [`@protected` directive](./directives/protected.md) to mark the fields that requiring success authentication to be requested.
 
 The whole example could look like this:
 
-```graphql
-schema
-  @server(port: 8000)
-  @link(id: "auth-basic", type: Htpasswd, src: "htpasswd") {
-  query: Query
-}
+<Tabs>
+  <TabItem value="config" label="main.yaml">
+
+```yaml
+server:
+  port: 8000
+links:
+  - src: main.graphql
+  - id: auth-basic
+    type: Htpasswd
+    src: htpasswd
+```
+
+  </TabItem>
 
+  <TabItem value="schema" label="main.graphql">
+
+```graphql
 type Query {
   user(id: Int!): User
     @http(
@@ -306,6 +334,9 @@ type User @protected {
 }
 ```
 
+  </TabItem>
+</Tabs>
+
 ### Making test request
 
 Now you can run the example file with Tailcall and try to make a query for data with specifying credentials.
@@ -353,7 +384,7 @@ To create this file you can use available web-tools like [JWK creator](https://r
 
 ### JWT Auth GraphQL Configuration
 
-To use JWT you should first include JWKS file generated from [Prerequisites](#prerequisites) with the help of [`@link` directive](./config/links.md#jwks).
+To use JWT you should first include JWKS file generated from [Prerequisites](#prerequisites) with the help of [`links` config](./config/links.md#jwks).
 
 We can use that file as an example for it:
 
@@ -372,17 +403,28 @@ We can use that file as an example for it:
 }
 ```
 
-After adding `@link` you can use the [`@protected` directive](./directives/protected.md) to mark the fields that requiring success authentication to be requested.
+After adding `links` you can use the [`@protected` directive](./directives/protected.md) to mark the fields that requiring success authentication to be requested.
 
 The whole example could look like this:
 
-```graphql
-schema
-  @server(port: 8000)
-  @link(id: "auth-jwks", type: Jwks, src: "jwks.json") {
-  query: Query
-}
+<Tabs>
+  <TabItem value="config" label="main.yaml">
+
+```yaml
+server:
+  port: 8000
+links:
+  - src: main.graphql
+  - id: auth-jwks
+    type: Jwks
+    src: jwks.json
+```
+
+  </TabItem>
 
+  <TabItem value="schema" label="main.graphql">
+
+```graphql
 type Query {
   user(id: Int!): User
     @http(
@@ -400,6 +442,9 @@ type User @protected {
 }
 ```
 
+  </TabItem>
+</Tabs>
+
 ### Making test request
 
 Now you can run the example file with Tailcall and try to make a query for data with specifying credentials.

diff --git a/docs/cli.md b/docs/cli.md
@@ -244,6 +244,31 @@ preset:
 </TabItem>
 </Tabs>
 
+---
+
+<Tabs>
+  <TabItem value="config" label="main.yaml">
+
+```yaml
+server:
+  port: 8000
+links:
+  - src: main.graphql
+```
+
+  </TabItem>
+
+  <TabItem value="schema" label="main.graphql">
+
+```graphql
+
+```
+
+  </TabItem>
+</Tabs>
+
+---
+
 ### Inputs
 
 The `inputs` section specifies the sources from which the GraphQL configuration should be generated. Each source can be either a REST endpoint or a protobuf file.