# @authentified/retool-scripts

A collection of Retool scripts designed to make integrating with [Gadget's APIs](https://gadget.dev/) a lot easier.

## Installation

Add the Authentified Retool scripts Unpkg URL to your Retool libraries.

`https://unpkg.com/@authentified/retool-scripts`

![Install Authentified's retool scripts via Unpkg https://unpkg.com/@authentified/retool-scripts](https://i.imgur.com/Wqqt1gF.png)

If needed, you can also include via various package managers:

```bash
npm install @authentified/retool-scripts
yarn add @authentified/retool-scripts
pnpm add @authentified/retool-scripts
```

## Functions

### transformFilterStackToGraphQLFilter

This function translates a Retool table filter stack to Gadget's GraphQL Filters. Create a transformer also called `transformFilterStackToGraphQLFilter` and paste the following code.

```
return window.Authentified.transformFilterStackToGraphQLFilter(
  {{ myTable.filterStack }}
)
```

This Transformer can now be used to generate the `filter` argument for your GraphQL query.

You can also append an extra GraphQL filter as a second argument if you want to ensure particular filters are passed to a query. If the filter stack is empty, the `extra` parameter will be used as the default filter:

```
return window.Authentified.transformFilterStackToGraphQLFilter(
  {{ myTable.filterStack }},
  { status: { equals: "published" }}
)
```

#### Filtering on related models

To enable filtering on related models, you will need to change the ID of the column to a dot notation representation of the filter. For example if you have a reference to a model named `product`, and you want to search by a field called `title` you just change the ID of your column to `product.title` and transformFilterStackToGraphQLFilter will do the rest.

![Related model filtering](https://i.imgur.com/XGtYcT5.png)

### transformSortArrayToGraphQLSortOrder

This function translates a Retool sort array to Gadget's GraphQL SortOrder. Create a transformer also called `transformSortArrayToGraphQLSortOrder` and paste the following code.

```
return window.Authentified.transformSortArrayToGraphQLSortOrder(
  {{ listingsTable.sortArray }}
)
```

You can also pass a default SortBy object if no filters are applied:

```
return window.Authentified.transformSortArrayToGraphQLSortOrder(
  {{ listingsTable.sortArray }},
  { createdAt: "Descending" },
)
```

### transformFilterStackToGelly

This function translates a Retool table filter stack to Gadget's GraphQL Filters. Create a transformer also called `transformFilterStackToGelly` and paste the following code.

```
return window.Authentified.transformFilterStackToGelly(
  {{ myTable.filterStack }}
)
```

This Transformer can now be used to generate the `filter` argument for your Gelly query, this is useful when using dyamic Views rather than GraphQL queries.

You can also append an extra GraphQL filter as a second argument if you want to ensure particular filters are passed to a query. If the filter stack is empty, the `extra` parameter will be used as the default filter:

```
return window.Authentified.transformFilterStackToGelly(
  {{ myTable.filterStack }},
  { status: { equals: "published" }}
)
```

Under the hood this uses the `transformGraphQLFilterToGelly` function.

### transformGraphQLFilterToGelly

This function translates a Gadget GraphQL filter to a Gelly where clause. 

```
return window.Authentified.transformGraphQLFilterToGelly(
  { AND: [{ status: { equals: "enabled" }}, { isDeleted: { equals: false }} ] }
)
```

This will return the following where clause

```
[where (status == "enabled" && isDeleted == false)]
```

## Example with Retool GraphQL query

![Use with GraphQL Query](https://i.imgur.com/La1ThCJ.png)