rivet-graphql

library0.5.0jsnpmunverified

A relay-inspired GraphQL data loading system for Next.js that provides normalized caching, batching, and automatic refetching. Version 0.5.0 is the current stable release with monthly updates. Key differentiators: integrates deeply with Next.js pages and routes, uses a normalized store like Relay but with a simpler API, and supports both client and server data fetching without schema introspection at runtime.

database devops

npm install rivet-graphql

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RIVET-GRAPHQL

rivet-graphql

databasejavascriptv0.5.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

RivetGraphQL

✓ import { RivetGraphQL } from 'rivet-graphql'

✗ const RivetGraphQL = require('rivet-graphql')

ESM-only package; CommonJS require will fail.

useRivet

✓ import { useRivet } from 'rivet-graphql'

React hook for data fetching in Next.js pages. Must be used within a RivetGraphQL provider.

fetchQuery

✓ import { fetchQuery } from 'rivet-graphql'

✗ import fetchQuery from 'rivet-graphql/fetch-query'

Available from main entry; no separate subpath.

Shows fetching GraphQL data on the server using RivetGraphQL instance, then consuming with useRivet hook in React.

import { RivetGraphQL } from 'rivet-graphql'; import { useRivet } from 'rivet-graphql'; // In Next.js API route or getServerSideProps export async function getServerSideProps() { const rivet = new RivetGraphQL({ endpoint: process.env.GRAPHQL_ENDPOINT ?? '', fetchOptions: { headers: { Authorization: `Bearer ${process.env.API_KEY ?? ''}` }, }, }); const query = ` query GetUsers { users { id name } } `; const data = await rivet.query(query); return { props: { data } }; } // In React component export default function UsersPage() { const { data, error, isLoading } = useRivet(); if (isLoading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return <ul>{data.users.map(u => <li key={u.id}>{u.name}</li>)}</ul>; }

Debug

Known issues

breakingRivetGraphQL constructor options changed in v0.4.0: `uri` renamed to `endpoint`.

fix

Replace `uri` with `endpoint`.

affects: <0.4.0

deprecatedUse of `RivetGraphQL.query` with positional arguments is deprecated; use object argument style.

fix

Replace `rivet.query(query, variables)` with `rivet.query({ query, variables })`.

affects: <0.5.0

gotcha`useRivet` must be called inside a component wrapped with `RivetGraphQLProvider`. Otherwise it throws 'No Rivet provider found in component tree'.

fix

Wrap your app or page with `<RivetGraphQLProvider client={rivet}>`.

affects: >=0.3.0

gotchaThe `fetchQuery` and `useRivet` functions do not automatically refetch when query variables change; you must manually call `refetch`.

fix

Use `refetch` returned from `useRivet` or call `rivet.query` again.

affects: >=0.3.0

Errors

Common errors & fixes

Cannot find module 'rivet-graphql' or its corresponding type declarations.

Package is ESM-only and not resolved correctly in a CommonJS project.

fix

Ensure `"type": "module"` in package.json or use dynamic import().

TypeError: rivet.query is not a function

Old API where `query` was a method on the instance; in v0.5.0 it's a method but some users may have used a different pattern.

fix

Update import: `const rivet = new RivetGraphQL(...)` and call `rivet.query({ query, variables })`.

Error: No Rivet provider found in component tree

Using `useRivet` without wrapping the component in `<RivetGraphQLProvider>`.

fix

Add `<RivetGraphQLProvider client={rivet}>` at the top level of your Next.js page or _app.tsx.

Upgrade

Version history

0.5.0latest on npm

Audit

Dependencies

graphqlrequiredGraphQL queries and parsing

nextrequiredUses Next.js API routes and data fetching conventions

Agent activity

12 hits · last 30 days

node