Add support for GraphQL data source

[Janpot]

Make it possible to create a datasource that accepts a graphql endpoint (and perhaps credentials). The user can then create queries based on this graphql endpoint. The query editor should then allow constructing arbitrary graphql queries and binding parameters to variables in the graphql query. The query editor should use the graphql schema to provide autocompletion.

[AnsonHwang86]

Any updates? I have tried to configure a graphQL query via fetch but it fails:

[oliviertassinari]

@AnsonHwang86 I was able to use the graphQL API like this:

export default async function ({ parameters }: ToolpadFunctionEvent) {
  const response = await fetch("https://api.github.com/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: `
{
  repository(owner: "mui", name: "material-ui") {
    issues(last: 50) {
      nodes {
        number
        url
        title
        timelineItems(itemTypes: LABELED_EVENT, first: 100) {
          nodes {
            ... on LabeledEvent {
              label {
                name
              }
              actor {
                login
              }
            }
          }
        }
      }
    }
  }
}
      `,
    }),
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
  const result = await response.json();
  return result.data.repository.issues.nodes;
}

Using a function data source: https://mui.com/toolpad/connecting-to-datasources/function/.

[oliviertassinari]

Long term, in the GraphQL editor, I think that we could explore how to reproduce a similar DX to:

https://docs.github.com/en/graphql/overview/explorer