Hasura

Refine provides a data provider for APIs powered with Hasura, a platform to build and deploy GraphQL APIs.

Good to know:

Hasura data provider doesn't support meta.gqlQuery and meta.gqlMutation fields yet. We'll add support in the future.
This library uses graphql-request@5 to handle the requests.
The graphql-ws@5 package, used to handle the realtime subscriptions is included in the package.
To learn more about data fetching in Refine, check out the Data Fetching guide.
To learn more about realtime features of Refine, check out the Realtime guide.

Installation

npm
pnpm
yarn

npm i @refinedev/hasura

pnpm add @refinedev/hasura

yarn add @refinedev/hasura

Usage

We'll create a GraphQL Client with our API url and pass it to the dataProvider function to create a data provider.

app.tsx

import Refine from "@refinedev/core";
import dataProvider, { GraphQLClient } from "@refinedev/hasura";

const client = new GraphQLClient("<API_URL>", {
  headers: {
    "x-hasura-role": "public",
  },
});

const App = () => (
  <Refine
    dataProvider={dataProvider(client)}
  >
    {/* ... */}
  </Refine>
);

Realtime

@refinedev/hasura also provides a liveProvider to enable realtime features of Refine. These features are powered by GraphQL subscriptions and uses graphql-ws to handle the connections.

app.tsx

import Refine from "@refinedev/core";
import dataProvider, { GraphQLClient, liveProvider, graphqlWS } from "@refinedev/hasura";

const client = new GraphQLClient("<API_URL>", {
  headers: {
    "x-hasura-role": "public",
  },
});
const wsClient = graphqlWS.createClient({
  url: "<WS_URL>",
});

const App = () => (
  <Refine
    dataProvider={dataProvider(client)}
    liveProvider={liveProvider(wsClient)}
    options={{ liveMode: "auto" }}
  >
    {/* ... */}
  </Refine>
);

Example

View Source Code

Run on your local

npm create refine-app@latest -- --example data-provider-hasura

Installation​

Usage​

Realtime​

Example​

Installation

Usage

Realtime

Example