Setup sanity client in react

 

Step 2. Crate a file with name sanity.js at root level of project.

In side sanity.js write this code.

import sanityClient from "@sanity/client";

import { ImageUrlBuilder } from "@sanity/image-url";

const client = sanityClient({

    projectId: 'qwoxusny',

    dataset: 'production',

    // to optimise cache if things not work

    useCdn: true,

    apiVersion: "2021-10-21",

});

// now im going to make image url builder this will pull image urls

// when i'm going to chnage/update image it provide the new url of

// that image.

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

export default client;

Step 3 . Add cors origin in sanity to white list hostnames.

//  RUN this to add exception for localhost 300 CORS policy

//  sanity cors add http://localhost:3000

/*

    what is ther purpose od cross-origin: when we want to fetch

    data from sanity . you sanity allow us to check.authenticate

    the request of data coming from which url.

    if we want to fetch data from blbl.com than we need to define in sanity API origin.

    Than sanity will delivere us our requested api data.

*/

Command to to that

-cd sanity

-sanity cors add http://<hostname:port>

Allow by typing Yes

thats it !.