# Using the First Resonance ION Component

The `First Resonance ION` component requires you to configure 2 settings:

1. Connection
2. GraphQL Query

There is also an optional third setting, GraphQL Variables, that can be used to pass variables to the query.

## Connection

Upon the first usage of the `First Resonance ION` component in a flow, you will need to configure the connection.

Click on the `+ Add Connection` button:

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FOFw1SbWVJ7gJ1usW9NXA%2Fimage.png?alt=media&#x26;token=2b27ba0c-4f31-4566-8dee-e1e916f3cf1a" alt=""><figcaption></figcaption></figure>

Enter in a name for the connection and select the Auth Endpoint (environment):

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FTAgvPsDL2ncfNSzWlykC%2Fimage.png?alt=media&#x26;token=bd3c46b4-dfac-40ac-b5cf-1956df691dd3" alt=""><figcaption></figcaption></figure>

Scroll down on the window and enter in the Client ID and Client Secret. Refer to this [page](https://manual.firstresonance.io/api/api-keys) on how to retrieve a client id and secret then click on the Sign in button.

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2Fay0lL9RkClTubgxxsfxw%2Fimage.png?alt=media&#x26;token=07d0e16a-7326-4cae-bdb8-5ea91c240117" alt=""><figcaption></figcaption></figure>

In subsequent usages of the `First Resonance ION` component within the flow, you will be able to select the connection from the dropdown.

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FwFipdaLPsjoMoYPOV11F%2Fimage.png?alt=media&#x26;token=04aca48d-5142-4bf1-9575-15c50d5766b6" alt=""><figcaption></figcaption></figure>

## GraphQL Query

Click on the E`dit` link to enter in a valid GraphQL query/mutation.

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FlFcTCUaFyFL9gyQKwf0V%2Fimage.png?alt=media&#x26;token=80b139b1-d2fa-46e1-9a74-0c486dbcc9df" alt=""><figcaption></figcaption></figure>

### Example Query

Here is an example GraphQL query to get issues and their related part inventories:

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FTcYInlVar6aiLyHD1rNF%2Fimage.png?alt=media&#x26;token=4176c489-96d4-4784-b51e-682322b3d3f5" alt=""><figcaption></figcaption></figure>

See [below](#example-query-1) for the example query variables.

### Example Mutation

Here is an example GraphQL mutation to update an issue:

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FQAUWDKAuh0gJBOnnxJEJ%2Fimage.png?alt=media&#x26;token=4b7bf2f3-55d0-4f56-bdb9-d602eaca9b2d" alt=""><figcaption></figcaption></figure>

See [below](#example-mutation-1) for the example query variables.

## GraphQL Variables

Click on the `Edit` link to enter any GraphQL variables that your query/mutation requires.

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FeMDaxmHrQOdS47D8tnsX%2Fimage.png?alt=media&#x26;token=f59e7844-eb95-4747-9c6f-c39ce76ae0aa" alt=""><figcaption></figcaption></figure>

### Example Variables

Here is how to setup the variables for the query:

Click on the hamburger icon to the left of the `Edit` link to expose the sub-menu then select `Reference`.

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FStN9ZRdixW2BiKzxsahJ%2Fimage.png?alt=media&#x26;token=f101413e-e913-4282-bbc9-d17f669f2794" alt=""><figcaption></figcaption></figure>

Enter the following json into the field:

```json
{
  "filters": {
    "id": {"eq": }
  }
}
```

Place the cursor after the `"eq":` then click the button to the right of the field.

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FlBNShBM6QYbLwWyf8OQD%2Fimage.png?alt=media&#x26;token=b2b28613-2761-418d-a5ba-11ed043a723b" alt=""><figcaption></figcaption></figure>

Select the reference step and the Reference path. In this example we are dynamically pulling in the id that is passed to the webhook and that id will be used to filter for a specific issue.

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FoZXuVrRqJ7PXCiESkKrJ%2Fimage.png?alt=media&#x26;token=cb5a15b9-6d91-4853-82f1-bec4a1e2ad02" alt=""><figcaption></figcaption></figure>

Once you have configured the reference the query variables should look like this:

<figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FwoE4H1xnuozDkmqJ2tdw%2Fimage.png?alt=media&#x26;token=e4683fc2-d72b-45a7-9978-30badd25226c" alt=""><figcaption></figcaption></figure>
