Getting started

I bet 5 zoo dollars that you'll get set up with Draqula in under a minute. Let's go.

Install

Install Draqula via npm or Yarn. CDN option is coming soon.

1$ npm install draqula graphql graphql-tag
2$ yarn add draqula graphql graphql-tag

Configure

First, initialize Draqula with the full URL to your GraphQL endpoint:

1import {Draqula} from 'draqula';
2
3const client = new Draqula('https://my-graphql-server.com/graphql');

Next, make your client available to all React components in your app by using DraqulaProvider. Find the place where you call the render() function provided by react-dom and modify it like this:

1 import {Draqula, DraqulaProvider} from 'draqula';
2 
3 const client = new Draqula('https://my-graphql-server.com/graphql');
4 
5 // Before
6 render(<MyApp />, document.body);
7 
8 // After
9 render(
10  <DraqulaProvider client={client}>
11    <MyApp />
12  </DraqulaProvider>,
13  document.body
14);

Query

Lastly, execute a GraphQL query in any of your components:

1 import React from 'react';
2 import {useQuery} from 'draqula';
3 import gql from 'graphql-tag';
4 
5 const TODOS_QUERY = gql`
6   {
7     todos {
8       id
9       title
10    }
11  }
12`;
13
14const Todos = () => {
15  const {data, isLoading, error} = useQuery(TODOS_QUERY);
16
17  return (
18    <>
19      {isLoading && <span>Loading…</span>}
20      {error && <span>Error: {error.message}</span>}
21      {data && (
22        <ul>
23          {data.todos.map(todo => (
24            <li key={todo.id}>{todo.title}</li>
25          ))}
26        </ul>
27      )}
28    </>
29  );
30};
31
32export default Todo;

This is an example query, of course, but at this point, you can replace it with your own. Your React app is ready to use Draqula!

Queries