Gene Services
Motivation
We built abstracted services to provide a unified API, allowing users to interact with services without needing to know the specific client in use. Only the service author handles client specifics. For more information, you can read the article on our service architecture (opens in a new tab).
Common API
Each of our services returns a common API format:
const { data, loading, error, fetchMore, refetch } = useMyService();Supported Clients
Currently, we support two clients:
Server-Side Hydration
Gene services are designed for server-side hydration. Although they function on the client side, their primary purpose is to hydrate services with data gathered on the server.
Query Clients Concept
In Next.js applications, developers use the getServerSideProps pattern to hydrate views with server-side data by passing props to the page, as described in the Next.js documentation (opens in a new tab).
However, React's nested component structure can lead to complex prop drilling. Although using a context to pass serverProps can reduce this complexity, it does not solve the issue entirely, particularly regarding cache invalidation. This setup results in two data sources: the props and the client-side instance of the query client, complicating cache management.
Our solution is to create a QueryClient instance on the server, fetch data, populate the QueryClient state, and send this state to the client side via the serverProps pattern. On the client side, we then initialize a QueryClient instance with the server-prepared initial state. This approach provides the following benefits:
- A single source of data
- QueryClient manages cache state and handles invalidation
