Next-sanity-client NPM

Sanity Client for Next.js Apps with App Dir Support

Overview

Features

Per-request Caching ⭐️
Full Typescript Support
Edge Runtime Support

Installation

yarn

yarn add next-sanity-client

npm

npm i next-sanity-client

Usage

import SanityClient from 'next-sanity-client';

const client = new SanityClient({
  projectId: 'YOUR_PROJECT_ID',
  dataset: 'YOUR_DATASET',
  useCdn: process.env.NODE_ENV === 'production',
});

client.fetch({
  query: `[_type == 'post']`,
  config: {
    cache: 'force-cache',
    next: { revalidate: 60 }
  }
});

Create API Utility

Predefine Query

The client support passing a queries object to get autocomplete when creating your api utilities functions

const client = new SanityClient({
  ...config,
  queries: {
    getTodosQuery: ``
  }
})

This is useful when you have a file with your queries, you can simply pass it to the client

// lib/queries.ts
export const getTodosQuery = groq`[_type == 'todo']`;

// lib/sanity.ts
import * as queries from './queries';

const client = new SanityClient({
  ...config,
  queries
});

And you can create a function to fetch that query using it name, full typed

// lib/api.ts
export const getTodos = client.createApiUtil<Todo[]>('getTodosQuery');

// here also you can set the default caching strategy
export const getTodo = client.createApiUtil<Todo, { id: string }>(
  'getTodoQuery',
  {
    cache: 'no-cache'
  }
);

// or use your own query
export const getProducts = client.createApiUtil<Product[]>(queries.getProducts, {
  cache: 'no-cache'
});

Next in your Server Components:

// app/todos/page.tsx
const todos = await getTodos({ cache: 'no-cache' });

// app/todos/[id]/page.tsx
const todo = await getTodo({ id: 'uid', next: { revalidate: 10 } });

// components/ProductList.tsx
const products = await getProducts({ cache: 'force-cache' });