@refinedev/nhost NPM

It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like authentication, access control, routing, networking, state management, and i18n.

NHost data provider and live provider integrations for refine

Nhost is an open-source backend and development platform that enables developers to build and scale their web and mobile apps.

refine is headless by design, offering unlimited styling and customization options. Moreover, refine ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI for convenience.

refine has connectors for 15+ backend services, including REST API, GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, and NestJS.

Installation & Usage

npm install @refinedev/nhost @nhost/nhost-js @nhost/react-auth

import { NhostClient } from "@nhost/nhost-js";
import dataProvider, { graphqlWS } from "@refinedev/nhost";

const nhost = new NhostClient({ backendUrl: "NHOST_API_URL" });

const gqlWsClient = graphqlWS.createClient({
  url: WS_URL,
  connectionParams: () => ({
    headers: {
      Authorization: `Bearer \${nhost.auth.getJWTToken()}`,
    },
  }),
});

const App = () => {
  return (
    <Refine
      dataProvider={dataProvider(nhost)}
      liveProvider={liveProvider(gqlWsClient)}
      /* ... */
    >
      {/* ... */}
    </Refine>
  );
};