Welcome to next-sanity-client 👋

> Sanity Client for Next.js Apps with App Dir Support

Overview

$3

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

Installation

$3

``sh
yarn add next-sanity-client
`

$3

`sh
npm i next-sanity-client
`

Usage


`ts
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 }
}
});
`

$3

#### Predefine Query
The client support passing a queries object to get autocomplete when creating your api utilities functions
`ts
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
`ts
// 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
`ts
// lib/api.ts
export const getTodos = client.createApiUtil('getTodosQuery');

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

// or use your own query
export const getProducts = client.createApiUtil(queries.getProducts, {
cache: 'no-cache'
});
`
Next in your Server Components:
`ts
// 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' });
``

Author

👤 Fedeya

- Website: fedeminaya.com
- Twitter: @fedeminaya
- Github: @Fedeya
- LinkedIn: @federico-minaya

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!