Introduction to Draqula - a GraphQL client for React apps

Michał Tyszkiewicz

Michał Tyszkiewicz

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.

Set it up

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

To start it up attach the URL to your GraphQL endpoint

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:

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

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:

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

Similarly Draqula uses a useMutation hook for mutations:

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:

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.

Refetching can also be done manually:

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

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

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.

⚡ Speed up your GraphQL API development

The GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster thanks to dozens of built-in micro features. Its graphical interface will also fix communication within your product team. Visualization is the key!

Try it for free