You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

next-sanity-client

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

next-sanity-client

sanity client for next.js with support for app directory


Version published
Weekly downloads
2.1K
increased by24.14%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

Welcome to next-sanity-client 👋

Version npm License: MIT

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' });

Author

👤 Fedeya hello@fedeminaya.com

🤝 Contributing

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

Show your support

Give a ⭐️ if this project helped you!

Keywords

FAQs

Package last updated on 24 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc