GraphQL 

Connection Details 

All requests to the GraphQL endpoint should be made with the Content-Type header set to application/json, and all responses from the GraphQL endpoint will be returned with the Content-Type response header set to application/json. The example-app GraphQL API is spec compliant.

To make requests to the Development GraphQL API, use the following URL:

https://example-app--development.gadget.app/api/graphql

To make requests to the Production GraphQL API, use the following URL:

https://example-app.gadget.app/api/graphql

Developing using the API Playground 

Gadget serves a web-based request console for easy development of custom or complicated queries at  example-app GraphQL playground. It's handy for exploring the example-app API and supports handy features like autocomplete, saved queries, and pretty output formatting.

Connecting with the Gadget API Client 

Gadget generates a type-safe, high-quality npm package that can be used in frontend and backend JavaScript projects for the example-app API. Find instructions for setting up the API client on the Installing page.

Executing Queries 

With a set up GadgetClient object, you can access data with the .query function. For more information on the return type of the .query method, consult the urql client.query docs.

.query returns a Promise for the data from the API in the same shape that the GraphQL query is written. The response object has the data at the data property.

1const response = await api.query(`
2  query GetAppName {
3    gadgetMeta {
4      slug
5    }
6  }
7`);
8
9console.log(response.data.gadgetMeta.slug);
10// => example-app

1const response = await api.query(`
2  query GetAppName {
3    gadgetMeta {
4      slug
5    }
6  }
7`);
8
9console.log(response.data.gadgetMeta.slug);
10// => example-app

Connecting with fetch 

Gadget's GraphQL API can be used without any wrapper client library in JavaScript by using fetch.

1const result = await fetch(
2  "https://example-app--development.gadget.app/api/graphql",
3  {
4    headers: {
5      accept: "application/json",
6      "content-type": "application/json",
7    },
8    body: JSON.stringify({
9      query: `
10      query GetAppName {
11        gadgetMeta {
12          name
13        }
14      }
15    `,
16    }),
17    method: "POST",
18  }
19);

1const result = await fetch(
2  "https://example-app--development.gadget.app/api/graphql",
3  {
4    headers: {
5      accept: "application/json",
6      "content-type": "application/json",
7    },
8    body: JSON.stringify({
9      query: `
10      query GetAppName {
11        gadgetMeta {
12          name
13        }
14      }
15    `,
16    }),
17    method: "POST",
18  }
19);

Gadget generally recommends using the provided API Client package where possible.

Connecting with cURL 

Gadget's GraphQL API can be used from command line HTTP clients like cURL as well:

curl 'https://example-app--development.gadget.app/api/graphql' \
  -H 'accept: application/json' \
  -H 'content-type: application/json' \
  --data-raw '{"query":"query { gadgetMeta { slug } }"}'

GraphQL types 

Gadget maps Gadget field types to specific GraphQL types for easy consumption of rich data via the GraphQL API.

Required 

All of the Gadget GraphQL types are governed by the Required option, which marks them as not null in the GraphQL API's accepted inputs and returned data. Changing the Required-ness of a field in the Gadget Editor will reflect in the GraphQL API immediately.