CODEWITHSUNDEEP
graphqlfaunadb
coure2011
coure2011

Reputation: 42504

How to run a graphql against faunadb from html client

I am totally new to graphql and faunadb, so plz bear with me if its a silly question. I see I can run graphql query from the dashboard > GRAPHQL. e.g. Pasting the following code

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

and hitting the Run button. But how I can run this query from my html/js code which I want to run in browser? In js I can create the clientsdk but not sure how to pass the above query?

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

On googling I found example which were using some FQL like structures like

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

but how I can just pass the graphql query and get the same result, its returning me in right side pane of the graphql play ground.

Upvotes: 0

Views: 161

Answers (2)

Luigi Servini
Luigi Servini

Reputation: 176

You can use a client like curl or any GraphQL client. With curl you can issue something like:

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

Upvotes: 1

Brian Morgan
Brian Morgan

Reputation: 13

I can get you 90% there but the code I present to you is written in TypeScript in an Angular app that uses HttpClient and RxJs Observables. With a little effort you can rewrite in JS using vanilla HTTP fetch.

By the way here is a video by Brecht De Rooms that helped me a lot: 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);

For me the hurdle was learning that the Fauna server expects JSON in this form:

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

That same structure applies when you run a mutation:

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

By the way, if your query doesn't work the first time, which it probably won't, I recommend opening your browser's developer's tools Network tab and inspect the request that was sent to the Fauna server. Look at the Response. There will be error information in there. The response status will be 200(OK) even when there are errors. You need to look inside the response to check for errors.

Upvotes: 0

Related Questions