如何从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'
});

在googling上，我找到了一个例子，它使用了一些类似于FQL的结构，如

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

但是我如何能够传递graphql查询并获得相同的结果，它在graphql play的右侧窗格中返回我。

Answer 1

您可以使用像、curl、或任何GraphQL客户端这样的客户机。使用卷发，您可以发布如下内容：

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%的支持，但是我提供给你的代码是用TypeScript编写的，它是在一个使用HttpClient和RxJ可观察的角度应用程序中编写的。只要稍加努力，您就可以使用普通的HTTP在JS中重写。

顺便提一下，布莱希特·德豪斯的一段视频对我帮助很大：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... " }

顺便说一句，如果您的查询第一次不能工作，那么我建议您打开浏览器的developer‘server选项卡，检查发送到Fauna服务器的请求。看看你的反应。里面会有错误信息。即使出现错误，响应状态也将为200(OK)。您需要查看响应内部以检查错误。