SDKs overview
Hasura automatically generates GraphQL APIs for connected databases, including Postgres, SQL Server, and BigQuery. To interact with these APIs from client applications, developers typically utilize GraphQL client libraries, which streamline the process of sending GraphQL queries, mutations, and subscriptions. While Hasura itself does not provide a single, monolithic SDK for all languages, it integrates with a broad ecosystem of GraphQL client libraries, many of which are officially recommended or widely adopted by the community.
These libraries handle network communication, query serialization, response parsing, and state management, providing a more ergonomic developer experience compared to directly crafting HTTP requests. Key functionalities include type safety (especially in TypeScript), caching mechanisms, and robust error handling. The choice of SDK often depends on the application's programming language and framework, as well as specific requirements for features like offline support or real-time data synchronization. Hasura's real-time capabilities, powered by GraphQL Subscriptions over WebSockets, are supported by most modern GraphQL clients, allowing applications to receive live updates from the database without continuous polling.
Official SDKs by language
Hasura's approach to SDKs focuses on leveraging existing, mature GraphQL client ecosystems rather than developing proprietary libraries for every language. The following table outlines commonly used and officially recommended client libraries that provide a robust integration experience with Hasura's GraphQL APIs. These libraries are typically maintained by their respective communities, with Hasura providing guidance and examples for their use within the Hasura documentation on client libraries.
| Language | Recommended Package/Client | Common Installation Command | Maturity/Status |
|---|---|---|---|
| TypeScript / JavaScript | Apollo Client | npm install @apollo/client graphql or yarn add @apollo/client graphql |
Mature, widely adopted |
| TypeScript / JavaScript | Relay | npm install react-relay relay-runtime graphql or yarn add react-relay relay-runtime graphql |
Mature, Facebook-backed |
| TypeScript / JavaScript | urql | npm install urql graphql or yarn add urql graphql |
Mature, lightweight alternative |
| Python | GQL (graphql-client) |
pip install gql |
Mature |
| Go | github.com/shurcooL/graphql |
go get github.com/shurcooL/graphql |
Mature |
| Ruby | graphql-client |
gem install graphql-client |
Mature |
| Java | Apollo Android / Apollo iOS (for mobile) | (Gradle/Maven config for Android) | Mature, mobile-focused |
| Java | graphql-java-client | (Maven/Gradle config for JVM) | Mature, general JVM client |
Installation
Installation of Hasura client libraries typically follows the standard package management practices for each respective language. For JavaScript and TypeScript projects, npm or yarn are the primary tools. Python projects use pip, while Go projects use the go get command. Java projects integrate dependencies via build tools like Maven or Gradle.
JavaScript/TypeScript (using Apollo Client)
# Using npm
npm install @apollo/client graphql
# Using yarn
yarn add @apollo/client graphql
Python (using GQL)
pip install gql
Go (using shurcooL/graphql)
go get github.com/shurcooL/graphql
Ruby (using graphql-client)
gem install graphql-client
Java (using graphql-java-client with Maven)
<dependency>
<groupId>com.graphql-java</groupId>
<artifactId>graphql-java-client</artifactId>
<version>1.0.0</version> <!-- Check for latest version -->
</dependency>
After installing the chosen client library, the next step involves configuring it to connect to your Hasura GraphQL endpoint. This usually requires providing the GraphQL API URL and any necessary authentication headers, such as an x-hasura-admin-secret or a JWT token, for secured endpoints. For more detailed configuration, refer to the Apollo Client integration guide for Hasura.
Quickstart example
This example demonstrates how to set up Apollo Client with a React application to fetch data from a Hasura GraphQL endpoint. This setup will enable querying data, performing mutations, and subscribing to real-time updates.
Prerequisites:
- A running Hasura instance with a GraphQL API endpoint (e.g.,
https://your-hasura-app.hasura.app/v1/graphql). - A basic React application (created with Create React App or Vite).
Step 1: Install Apollo Client and GraphQL
npm install @apollo/client graphql react
Step 2: Initialize Apollo Client
Create a new file, e.g., src/apollo.js, to configure your Apollo Client instance:
import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, split } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
// Replace with your Hasura GraphQL endpoint
const HASURA_GRAPHQL_ENDPOINT = 'https://your-hasura-app.hasura.app/v1/graphql';
// Replace with your Hasura admin secret if required, or fetch from environment variables
const HASURA_ADMIN_SECRET = 'YOUR_HASURA_ADMIN_SECRET'; // Only for development, use secure methods in production
// Create an http link for queries and mutations
const httpLink = new HttpLink({
uri: HASURA_GRAPHQL_ENDPOINT,
headers: {
'x-hasura-admin-secret': HASURA_ADMIN_SECRET,
},
});
// Create a WebSocket link for subscriptions
const wsLink = new WebSocketLink({
uri: `ws${HASURA_GRAPHQL_ENDPOINT.substring(HASURA_GRAPHQL_ENDPOINT.indexOf(':'))}`,
options: {
reconnect: true,
connectionParams: {
headers: {
'x-hasura-admin-secret': HASURA_ADMIN_SECRET,
},
},
},
});
// Using 'split' to send 'query' and 'mutation' operations to the HTTP link
// and 'subscription' operations to the WebSocket link
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink,
);
const client = new ApolloClient({
link: splitLink,
cache: new InMemoryCache(),
});
export default client;
Step 3: Wrap your React app with ApolloProvider
In your src/index.js or src/App.js, import the client and wrap your root component with ApolloProvider:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ApolloProvider } from '@apollo/client';
import client from './apollo'; // Your Apollo Client instance
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</React.StrictMode>
);
Step 4: Fetch data in a React component
Now you can use Apollo Client hooks (useQuery, useMutation, useSubscription) in your components. For example, to fetch a list of users:
import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
query GetUsers {
users {
id
name
email
}
}
`;
function UsersList() {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return <p>Loading users...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h2>Users</h2>
<ul>
{data.users.map((user) => (
<li key={user.id}>
{user.name} ({user.email})
</li>
))}
</ul>
</div>
);
}
export default UsersList;
This quickstart provides a foundational setup for integrating Hasura with a frontend application using Apollo Client. Similar patterns apply to other client libraries and programming languages, with variations in syntax and specific API calls. For more in-depth examples and advanced features like pagination, authentication, and error handling, consult the Apollo Client documentation directly.
Community libraries
Beyond the officially recommended GraphQL clients, the broader developer community has created and maintained numerous libraries that can interact with Hasura's GraphQL APIs. These libraries often cater to niche requirements, specific frameworks, or offer alternative approaches to GraphQL client-side management.
- GraphQL Request: A lightweight GraphQL client for JavaScript environments, suitable for simple queries and mutations without the overhead of a full-featured client like Apollo. It's often used in server-side Node.js applications or small frontend projects.
- SWR / React Query with GraphQL Adapters: While not pure GraphQL clients, libraries like SWR and React Query can be used to manage data fetching and caching with GraphQL APIs by providing custom fetcher functions. They integrate well into React ecosystems for state management and data synchronization.
- Gatsby / Next.js GraphQL Integrations: Frameworks like Gatsby and Next.js have built-in or plugin-based support for GraphQL data sourcing, enabling static site generation or server-side rendering with data fetched from Hasura.
- Elixir (Absinthe.run): For Elixir developers, the Absinthe GraphQL toolkit can be used to build GraphQL clients, though it is more commonly used for building GraphQL servers. It can be adapted to consume Hasura APIs.
- Flutter / Dart (graphql_flutter): A popular GraphQL client for Dart and Flutter applications, enabling mobile and cross-platform development with Hasura.
When considering community libraries, it is important to evaluate their maintenance status, community support, and compatibility with Hasura's specific features, such as real-time subscriptions and authentication mechanisms. The Hasura Integrations page often lists additional community contributions and specific guides for integrating with various platforms and tools.