Connecting to Github Using the GraphQL API

November 29, 2023 · 2 minutes

· 0

Goal

Connect to the GitHub GraphQL API from Appsmith, and securely save the credentials as a datasource.

Prerequisites

Github account

Appsmith account

Overview

Github has a great GraphQL API. In fact, there are many things that you can't do in the UI or with REST - that you can only use GraphQL. The good news is that it is really easy to create a secure GraphQL connection to Github using Appsmith. Not only that, but we can set up the token to be securely stored without risk of public use.

Creating the Personal Access Token in GitHub

The process starts in GitHub. Navigate to your Settings, then to the Developer Settings at the bottom. Here, you'll find the option to generate new tokens. Unlike the classic token, the fine-grained tokens allow you to specify the exact scopes or permissions, like read or write access to certain parts of your GitHub backend.
1. Choose Fine Grain Tokens and click Generate New Token.
2. Name your token.
3. Select the organization and repositories you want the token to access. For instance, you might only need read access to the issues of a specific repository.
4. Click SAVE and generate the token.
Security Tip: Once your token is generated, keep it confidential, just like a password.
Integrating with Appsmith

In Appsmith, start by creating a new query using the curl import feature. Paste in this sample curl from the github docs, but don't click import yet!
```
curl -H "Authorization: bearer TOKEN" -X POST -d " \
 { \
   \"query\": \"query { viewer { login }}\" \
 } \
" https://api.github.com/graphql
```
Next, replace the word TOKEN with your new token from GitHub. Now import the query, and give it a name.

Run the query and you should get back a respone with your GitHub user name.
Securing the Token on Appsmith

Storing the token securely is essential. Appsmith provides a way to save your token on its server, keeping it hidden from end users and the app editor.
1. Click SAVE AS DATASOURCE to save the token to a datasource.
2. Remove the token from the header and instead, add it in the authentication section as a bearer token.
  1. Under Authentication Type, choose Bearer token
  2. Paste the token in the the encrypted bearer token field.
3. Remove the original Authentication header which was stored in plain text.
This process encrypts your token, ensuring it's securely stored on the Appsmith server, and not exposed to end users.
Testing and Finalizing

Re-run your query to test the datasource. If everything is set up correctly, your query should execute successfully, and the token will remain secure.

Conclusion

By following these steps, you have securely connected to the GitHub GraphQL API using a fine-grained personal access token saved in an Appsmith datasource. This method not only enhances the security of your application but also provides a streamlined approach to integrating GitHub's extensive capabilities into your Appsmith applications.