Hola, soy principiante en Sanity y estoy trabajando en un proyecto personal. Todo lo que quiero saber es cómo agrego un usuario junto con su imagen de perfil seleccionada como un archivo de su dispositivo a la base de datos de Sanity. Quiero que los detalles que ingresaron en este formulario se guarden en el backend. Estoy usando Next.js.
<div className="flex h-screen flex-col items-center justify-center bg-[#171821]"> <div className="m-6"> <form> <input aria-label="Enter your email address" type="text" placeholder="User Name" className="text-gray-base mr-3 mb-2 h-2 w-full roundedpy-5 px-4 text-sm bg-black text-white"/> <button type="submit" className="mt-5 w-full bg-green-400 p-2"> Add User </button> </form> </div> </div>Aquí está mi esquema de cordura simple
export default { name: 'user', title: 'User', type: 'document', fields: [ { name: 'user_name', title: 'User Name', type: 'string', }, { name: 'profile_image', title: 'Profile Image', type: 'image', }, ] }Puede usar el cliente de JavaScript para realizar mutaciones como esta. Si cada usuario está alineado con un documento, puede consultar el método create() . Asegúrese de considerar la seguridad de su token, ya que necesitará usar un token de escritura y eso proporcionará acceso CRUD completo a todo el contenido de su proyecto.
Inicialice el cliente de cordura:
import SanityClient from '@sanity/client' export const client = sanityClient({ projectId: process.env.SANITY_PROJECT_ID, dataset: 'production', apiVersion: 'v1', token: process.env.SANITY_TOKEN, useCdn: false, }) escribe una función api en pages/api/createUser
import { client } from '../../lib/sanity' const createUserOnSanity = async (req, res) => { try { const userDoc = { _type: 'users', name: req.body.name, profileImage: req.body.profileImage, ... } await client.createIfNotExists(userDoc) res.status(200).send({ message: 'success' }) } catch (error) { res.status(500).send({ message: 'error', data: error.message }) } } export default createUserOnSanityLuego, en su componente, haga una solicitud de publicación a esta API
try { await fetch(`/api/createUser`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: name, // uploading file from computer needs extra work // I just pass url profileImage: event.target.url.value, }), }) } catch (error) { console.error(error) }