Skip to content

Commit

Permalink
address some reviewed changes
Browse files Browse the repository at this point in the history
  • Loading branch information
ibishal committed Mar 1, 2024
1 parent e80af05 commit b4c130c
Showing 1 changed file with 21 additions and 16 deletions.
37 changes: 21 additions & 16 deletions docs/guides/mustache.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
---
title: Mustache template with tailcall
title: Mustache Templates
---

Whenever you have a string literal used in a directive, it should support mustache template.The mustache templates serve as placeholders, allowing you to insert dynamic content into your configurations. Simply enclose the dynamic content within double curly braces ({{ }}) wherever you need it within the directive.
Whenever you have a string literal used in a directive, it should support mustache template.The mustache templates serve as placeholders, allowing you to insert dynamic content into your configurations. Simply enclose the dynamic content within double curly braces (`{{ }}`) wherever you need it within the directive.
Learn more about mustache template [here](https://mustache.github.io/)

### Leveraging mustache template
## Leveraging mustache template

#### Contextual Transformation
### Contextual Transformation

To get a list of todos you will run the query `todo` defined below.

> [!NOTE]
> The base url used for this example is https://jsonplaceholder.typicode.com
```graphql
@server(port: 8000, graphiql: true)
@upstream(baseURL: "https://jsonplaceholder.typicode.com") {
query: Query
}
```
In this example, the `@upstream` directive is used to specify the baseURL as "https://jsonplaceholder.typicode.com". This baseURL will be used as the base URL for all HTTP requests defined within the schema.

```graphql
type Query {
Expand All @@ -25,17 +30,17 @@ type Todo {
}
```

Suppose you now only want the completed todos to be shown.You can accomplish this by utilizing the `completedTodos` query. This modified query includes a `completed` argument, allowing you to specify whether you want to retrieve completed or ongoing todos.
Suppose you want to retrieve only the `completed` todos by setting the completed query parameter to `true`. You can achieve this by utilizing query parameters in the `todos` query. Here's how you can modify the query to achieve this

```graphql
type Query {
todos(completed: Boolean): [Todo] @http(path: "/todos", query: [{key: "completed", value: "{{args.completed}}"}])
}
```

In the changed `completedTodos` query, we have added a way to ask for either completed or ongoing tasks. When you run this `completedTodos` query in the playground, you can ask for only the completed tasks by typing `completed: true` in the box where you normally put details. This way, you'll get a list that includes only the tasks that are finished.
With this modification, you can specify the `completed` argument when querying for todos. Setting `completed` to `true` will fetch only the completed todos, while setting it to `false` or omitting it will retrieve ongoing todos. This approach allows for dynamic filtering of todos based on their completion status using query parameters

#### Dynamic URL path
### Dynamic URL path

Consider the `Post` type with comments as a nested field. You can dynamically generate the URL for fetching comments based on the `id` of the current post:

Expand All @@ -44,19 +49,19 @@ type Post {
id: ID!
title: String!
body: String!
comments: [Comment] @http(path: "/posts/{{value.id}}/comments")
comments: [Comment] @http(path: "/posts/`{{value.id}}`/comments")
}
```

In this example `value.id` is used to access the id field of the current Post. When querying for comments for a specific post, the Mustache template `"/posts/{{value.id}}/comments"` dynamically incorporates the id into the URL. For instance, if you run a query for a post with ID 1, the resulting HTTP request path becomes `/posts/1/comments`, fetching comments associated with that post.
In this example `value.id` is used to access the id field of the current Post. When querying for comments for a specific post, the Mustache template `/posts/{{value.id}}/comments` dynamically incorporates the id into the URL. For instance, if you run a query for a post with ID 1, the resulting HTTP request path becomes `/posts/1/comments`, fetching comments associated with that post.

#### Customization in Queries
### Customization in Queries

Imagine a scenario where you need to fetch paginated data from an API

```graphql
type Query {
paginatedPosts(page: Int!): [Post] @http(path: "/posts", query: [{key: "page", value: "{{args.page}}"}])
paginatedPosts(page: Int!): [Post] @http(path: "/posts", query: [{key: "page", value: "`{{args.page}}`"}])
}
```

Expand All @@ -72,7 +77,7 @@ type Query {

When executing `paginatedPosts(page: 2)`it constructs a dynamic path: `/posts?page=2`. Here, the Mustache template `/posts?page={{args.page}}` inserts the provided page number directly into the path(in our case 2), guiding the API to retrieve posts from the specified page. This flexibility allows for dynamic path creation, tailored to the required page, through the use of Mustache templates.

#### Dynamic input
### Dynamic input

Suppose you want to create a post with your input

Expand All @@ -96,7 +101,7 @@ input PostInput {

The createPost mutation needs specific details like title, body, and userId to make a new post.With Mustache's dynamic templating, the `{{headers.input}}` tag inside the body parameter puts the entire input object into the request. This lets us adjust what data gets sent in the POST request.When we use the mutation with the right title, body, and userId, it makes a POST request, creating a new post with the details. Mustache's flexibility helps customize the data sent through the request.To ensure everything's understood, we set the Content-type header to application/json; charset=UTF-8, signaling that the request sends data in JSON format with UTF-8 encoding.

#### Consistency in Configuration
### Consistency in Configuration

Consider a case where you're utilizing the same base URL across multiple API endpoints.Mustache templates help us to do this in the simplified form below

Expand All @@ -107,6 +112,6 @@ type Query {
}
```

In this scenario, Mustache templates are employed to integrate environment variables( [env variables in tailcall](environment-variables.md) ), specifically `API_BASE_URL`, into the base URL across multiple API endpoints. By referencing {{env.API_BASE_URL}}, the schema standardizes the base URL for both `users` and `posts` endpoints, ensuring any modifications to the environment variable automatically reflect across all API calls involving these queries. This approach enhances maintainability by allowing global changes to the base URL through the environment variable, promoting consistency in configuration management.
In this scenario, Mustache templates are employed to integrate environment variables( [env variables in tailcall](environment-variables.md) ), specifically `API_BASE_URL`, into the base URL across multiple API endpoints. By referencing `{{env.API_BASE_URL}}`, the schema standardizes the base URL for both `users` and `posts` endpoints, ensuring any modifications to the environment variable automatically reflect across all API calls involving these queries. This approach enhances maintainability by allowing global changes to the base URL through the environment variable, promoting consistency in configuration management.

Using Mustache templates in Tailcall lets you create flexible and powerful API configurations. They are like tools that help developers build strong and adaptable systems by allowing dynamic adjustments in how APIs are set up. When used wisely and with smart thinking, Mustache templates make it easier to create strong and adaptable systems for your APIs.

0 comments on commit b4c130c

Please sign in to comment.