Log in to GraphQL Editor
Introduction to Draqula - a GraphQL client for React apps
Michal

Michał Tyszkiewicz

9/24/2019

Introduction to Draqula - a GraphQL client for React apps

Draqula is a lightweight GraphQL client, perfect for smaller and simpler React apps. Most web apps don't need higher-order components, subscriptions or local state management, that’s where Draqula comes in. It focuses on simple apps and execution using React hooks for building queries and mutations.

The main focus of Draqula is maintaining simple API and codebase as well as being as straightforward as possible by relying on hooks. It also has basic cache implementation and automatic retires for network errors and failed queries. Higher order or render-prop components, and subscriptions will not be supported to maintain the simplicity of the client.

01

Set it up

Installing via Yarn or npm is really simple and Draqula is ready to go in a matter of seconds

02

To start it up attach the URL to your GraphQL endpoint

03

Now to make Draqula available to React components in your app use DraqulaProvider. Then find the render() function and modify it to include Draqula, like this:

04

Now all you need to do is run a GraphQL query in your components:

05

Take it for a spin

Queries have to be made using the gql function from the graphql-tag module and have to be defined outside your component. Here’s an example of a basic query without variables:

06

Now let’s try a Query with a variable by simply adding another argument to useQuery:

07

Similarly Draqula uses a useMutation hook for mutations:

08

Just like with queries mutations can also use variables, the difference is you don't add them into useMutation and use a mutate function instead:

09

Rounding it out

Draqula has some additional functions like basic caching and refetching. For example if you previously executed a query with a page = 1 variable the next time you run the same query with that variable Draqula will return the data last stored for that query. It will also send a refetch request in the background in case it’s outdated. Caching can be turned off for an individual query or globally.

10

Refetching can also be done manually:

11

Draqula also has a fetchMore function in case your app needs to add more data to the list without deleting current data.

12

and a merging function if you want to merge new data with the current one

13

Overall Draqula is a handy little tool that’s quick and easy to use and the developer is still working on adding new features, so give it a try and see for yourself.

Check out our other blogposts

5 Developer Tools you need to check out!
Tomek Poniatowicz
Tomek Poniatowicz
5 Developer Tools you need to check out!
2 min read
almost 5 years ago
GraphQL Tutorial - Queries and mutations Part 1
Robert Matyszewski
Robert Matyszewski
GraphQL Tutorial - Queries and mutations Part 1
8 min read
about 5 years ago
How to convince your team to use GraphQL?
Tomek Poniatowicz
Tomek Poniatowicz
How to convince your team to use GraphQL?
3 min read
about 4 years ago

Ready for take-off?

Elevate your work with our editor that combines world-class visual graph, documentation and API console

Get Started with GraphQL Editor