0

我对graphql和fatheraldb完全陌生，所以如果这是一个愚蠢的问题，请多多包涵。我看到我可以从仪表板 > 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 操场的右侧窗格中返回我。

4

2 回答 2

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 }} }}"}'
于 2020-09-16T15:06:31.527 回答
0

我可以得到你 90% 的信息，但我呈现给你的代码是用 TypeScript 在一个使用 HttpClient 和 RxJs Observables 的 Angular 应用程序中编写的。稍加努力，您就可以使用 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)。您需要查看响应以检查错误。

于 2020-09-19T02:27:09.973 回答