如何从 html 客户端运行针对 faunadb 的 graphql

Question

我对 graphql 和 faunadb 是全新的，所以如果这是一个愚蠢的问题，请耐心等待。我看到我可以从仪表板 > GRAPHQL 运行 graphql 查询。例如粘贴以下代码

query FindAllTodos {
  allTodos {
    data {
      _id
      title
      completed
      list {
        title
      }
    }
  }
}

并点击运行按钮。但是我如何从我想在浏览器中运行的 html/js 代码中运行这个查询呢？在 js 中我可以创建 clientsdk 但不确定如何传递上述查询？

import faunadb, { query as q } from 'faunadb';
let adminClient = new faunadb.Client({
  secret: 'my-key'
});

在谷歌搜索中，我发现了一些使用 FQL 之类结构的示例，例如

adminClient.query(
      q.Get(q.Ref(q.Collection('Todo'), '276653641074475527'))
    )
    .then((ret) => console.log(ret));

但是我如何才能通过 graphql 查询并获得相同的结果，它在 graphql 游乐场的右侧窗格中返回我。

Answer 1

您可以使用 curl 之类的客户端或任何 GraphQL 客户端。使用 curl 你可以发出类似这样的命令：

curl -X POST -H 'Authorization: Bearer <your key>' https://graphql.fauna.com/graphql -d '{ "query": "{ FindAllTodos{ data {_id title completed list { title }} }}"}'

Answer 2

我可以为您提供 90% 的帮助，但我提供给您的代码是在使用 HttpClient 和 RxJs Observables 的 Angular 应用程序中用 TypeScript 编写的。稍加努力，您就可以使用 vanilla HTTP fetch 在 JS 中重写。

顺便说一句，Brecht De Rooms 的一段视频对我帮助很大： https://www.youtube.com/watch?v=KlUPiQaTp0I

  const SERVER_KEY = 'Your server key goes here';

  const executeQuery = (query: string) => {
    const headers = new HttpHeaders().set('Authorization', 'Bearer ' + SERVER_KEY);
    return this.http.post<any>('https://graphql.fauna.com/graphql',
      JSON.stringify({ query }), { headers });
  }

  const findAllTodos = () => {
    const query = `query FindAllTodos {
      allTodos {
        data {
          _id
          title
          completed
          list {
            title
          }
        }
      }
    }`;
    return executeQuery(query);
  }

  findAllTodos().subscribe(console.log);

对我来说，障碍是了解到 Fauna 服务器期望 JSON 这种形式：

{ "query": "query FindAllTodos {allTodos { ... and so forth and so on ..." }

当您运行突变时，同样的结构适用：

{ "query": "mutation AddTodo { ...etc... " }

顺便说一下，如果您的查询第一次没有成功，我建议您打开浏览器的开发人员工具网络选项卡并检查发送到 Fauna 服务器的请求。查看响应。里面会有错误信息。即使出现错误，响应状态也将是 200(OK)。您需要查看响应以检查错误。

如何从 html 客户端 运行 针对 faunadb 的 graphql

How to run a graphql against faunadb from html client

graphql

faunadb

如何从 html 客户端运行针对 faunadb 的 graphql