|
| 1 | +# GraphQL |
| 2 | + |
| 3 | +GraphQL query language allows the client to specify the structure of the requested data, and returns data from the server using the same structure. Such design ensures that only required data is retrieved, thus improving query efficiency. |
| 4 | + |
| 5 | +## Connect GraphQL API to Openblocks |
| 6 | + |
| 7 | +Follow these steps to connect to GraphQL APIs. |
| 8 | + |
| 9 | +1. Click **Data Sources** on the Openblocks homepage. |
| 10 | +2. Click **New data source** on the upper right. This permission is restricted to workspace admins and developers. |
| 11 | +3. Select **APIs** > **GraphQL**.  |
| 12 | + |
| 13 | + <figure><img src="../../.gitbook/assets/graphql-1.png" alt=""><figcaption></figcaption></figure> |
| 14 | +4. Configure general settings. At a minimum, input **Name** and the base **URL** of the API to connect to. **Headers** and **Parameters** are optional. |
| 15 | +5. Configure **Authentication Type**. |
| 16 | +6. Click **Save**.  |
| 17 | + |
| 18 | + <figure><img src="../../.gitbook/assets/graphql-2.png" alt=""><figcaption></figcaption></figure> |
| 19 | + |
| 20 | +You can also connect to a new GraphQL API data source when creating or editing queries in query library or query editor. |
| 21 | + |
| 22 | +## Authentication type |
| 23 | + |
| 24 | +By default, the authentication type is **None**. You can configure it as **Basic** or **Digest**, which require Username and Password. If you need other authentication methods, contact our customer service on the [homepage](https://openblocks.dev). |
| 25 | + |
| 26 | +<figure><img src="../../.gitbook/assets/graphql-3.png" alt=""><figcaption></figcaption></figure> |
| 27 | + |
| 28 | +The following is an example of connecting to [GitHub GraphQL API](https://docs.github.com/en/graphql). Set the authentication type to **None**. Then, input the required information into **Headers** to complete the authentication. The key is "Authorization" and the value is `"Bearer" + white space + YOUR_ACCESS_TOKEN`. See [Creating a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) for detailed information. |
| 29 | + |
| 30 | +<figure><img src="../../.gitbook/assets/graphql-4.png" alt=""><figcaption></figcaption></figure> |
| 31 | + |
| 32 | +## SSL Cert Verification |
| 33 | + |
| 34 | +For detailed information, see [SSL Cert Verification](graphql.md#ssl-cert-verification). |
| 35 | + |
| 36 | +## Create a GraphQL query |
| 37 | + |
| 38 | +You can create GraphQL queries in two ways: |
| 39 | + |
| 40 | +* add a new data source and then create a query |
| 41 | +* create a query directly |
| 42 | + |
| 43 | +Note that without creating a new data source, the GraphQL data source is not stored in your **Data Sources** and thus cannot be accessed to build other queries. |
| 44 | + |
| 45 | +### Create a query with a new data source |
| 46 | + |
| 47 | +Follow the steps to add a new GraphQL data source first and then create a query. |
| 48 | + |
| 49 | +1. Connect GraphQL API to access to. |
| 50 | +2. In the query editor, click **+ New**. |
| 51 | +3. Select the added API in **Data source**. |
| 52 | +4. Write a query. |
| 53 | +5. Click ▶ **Run**.  |
| 54 | + |
| 55 | + <figure><img src="../../.gitbook/assets/graphql-5.png" alt=""><figcaption></figcaption></figure> |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +For details about using GraphQL, reference [Introduction to GraphQL](https://graphql.org/learn/). |
| 60 | + |
| 61 | +The following GraphQL query searches the latest 20 closed issues in the repository `octocat/Hello-World`, and returns the title, URL, and the first 5 labels of each issue. |
| 62 | + |
| 63 | +<figure><img src="../../.gitbook/assets/graphql-6.png" alt=""><figcaption></figcaption></figure> |
| 64 | + |
| 65 | +### Create a query with predefined data source |
| 66 | + |
| 67 | +Follow the steps to create a GraphQL query directly. |
| 68 | + |
| 69 | +1. In the query editor, click **+ New**. |
| 70 | +2. Select **GraphQL Query** in Data sources. Openblocks offers this built-in plain data source so that you can quickly create GraphQL queries without adding a new data source first. |
| 71 | + |
| 72 | + <figure><img src="../../.gitbook/assets/graphql-7.png" alt=""><figcaption></figcaption></figure> |
| 73 | +3. Enter URL, Query, Variables, Parameters, and fill in other fields if needed.  |
| 74 | + |
| 75 | + <figure><img src="../../.gitbook/assets/graphql-8.png" alt=""><figcaption></figcaption></figure> |
| 76 | +4. Click ▶ **Run**. |
| 77 | + |
0 commit comments