Performance is more important than ever in the world of web development and technology has continued to make leaps and bounds to keep up with the increasing data demands of modern websites.
One of those major innovations is GraphQL, a query language released by Facebook in 2012 which has grown significantly in popularity in the last several years. And it’s no wonder — GraphQL allows your front-end to obtain all the information it needs from a single request to a consolidated endpoint, giving a boost to efficiency in both loading times and development times. Here are two graphs from State of JS 2020 showing the increasing usage proportions in surveyed developers year over year.
Recoil was another major development in front-end architecture from Facebook in 2018 and was the first atomic state management library. Similar libraries like Jotai, a minimal and flexible alternative to Recoil, have also gained popularity since then. Atomic state management paradigms allow React applications to eschew complex unified state containers (i.e. vanilla React, Redux) in favor of compartmentalized units of state which components can subscribe to individually. This allows components from anywhere on the component tree to request and receive customized data using a simple React hook with no need for prop drilling or the complex reducers, dispatches, and actions of Redux. Applications using atomic state management solutions are extremely flexible and cut down on development time spent putting together boiler plate code.
These two technologies have individually revolutionized front-end architecture but our team saw that combined, they could do even better.
Enter AtomiQL — a GraphQL client fully integrated with atomic state management capabilities. AtomiQL allows developers to reap the benefits of type-safety, UI and data layer logic separation, and a clean query language interface, while optimizing front-end rendering performance with atomic state management.
How do I use it? It’s as simple as installing our npm package ‘atomiql’ and ‘jotai’ into your project, connecting our application to your React app and server, and inputting your GraphQL query string into our custom useQuery hook. Under the hood, our library will query your server, store that data into an atom of state, and then give you access to that atom.
Applications using AtomiQL will also have access to these features, with more on the way:
- Local or server-only queries
- Field-level query directives
- Support for client-side schema definitions
- Query caching
- Cache invalidation & normalization
- Local and server mutations, with custom mutation callbacks
- Client API to handle custom interactions with the Client cache
How does it work? AtomiQL is built on top of Jotai and GraphQL-Request, two minimal and highly flexible libraries. For a look under the hood and details of how we implemented features, check out our Github repository. Feel free to leave us a comment, question, and a star!
Let’s get started!
You can download our npm package and start taking advantage of these two powerful pieces of technology right away. For a detailed but simple guide on how to install our project, take a peek at the Getting Started guide on our website!
We love user feedback so please send our way any suggestions for features or code contributions. Feel free to also message any of us with questions about our project.
Thanks so much for reading and take a look below for some important links and information about our team members!
Until next time — the AtomiQL team
AtomiQL Website: www.AtomiQL.com
Github Repo: https://github.com/oslabs-beta/AtomiQL
Team Members:
AtomiQL is a beta product developed in partnership with OSLabs.
