✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Difference between importing `myConfiguredSanityClient` and `createClient` in a Slack thread.

8 replies
Last updated: Aug 30, 2023
is there a difference between
import myConfiguredSanityClient from './sanityClient'
and import {createClient} from '@sanity/client'
Aug 30, 2023, 11:27 AM
I believe we use createClient inside sanityClient.ts to configure our client.
import { createClient } from 'next-sanity';

import { apiVersion, dataset, projectId, useCdn, perspective } from '../env';

export const client = createClient({
	apiVersion,
	dataset,
	projectId,
	useCdn,
	perspective,
});

Aug 30, 2023, 11:33 AM
createClient
from
@sanity/client
initializes a new Sanity Client with the provided config, e.g.
projectId
,
dataset
etc.
Aug 30, 2023, 11:35 AM
Okay i'm really new to to sanity and coding in general and i'm tyring toset up an imgurl builder using the code below:

import { useClient } from '@sanity/client';
import imageUrlBuilder from "@sanity/image-url";

const client = useClient({
projectId:'p57ljfhb',
dataset: "production",
useCdn: true,
apiVersion: '2021-10-21'

})
const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source)
//sanity cors add
http://localhost:3333 export default client;


I got this error below:


TypeError: 0, _client.useClient is not a function (it is undefined), js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and
AppRegistry.registerComponent
wasn't called., js engine: hermes


I then changed the code to the following(have no idea what i did here tbh):


import myConfiguredSanityClient from './sanityClient'
import imageUrlBuilder from "@sanity/image-url";

const client = myConfiguredSanityClient({
projectId:'p57ljfhb',
dataset: "production",
useCdn: true,
apiVersion: '2021-10-21'

})

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source)
//sanity cors add
http://localhost:3333 export default client;

i got the following errors

None of these files exist:
* sanityClient(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css)
* sanityClient\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs|.android.scss|.native.scss|.scss|.android.sass|.native.sass|.sass|.android.css|.native.css|.css)
18 | // export default client;
19 |

20 | import myConfiguredSanityClient from './sanityClient'
Aug 30, 2023, 11:54 AM
Hmm I can show you the way Ive done it, but its with the client coming out of the “next-sanity” npm package. Can you show how you use the urlFor with your image tag?
Aug 30, 2023, 12:02 PM
Well, i'm following a tutorial and this is how he does it:

<Image source={{
	uri: urlFor(imgUrl).url()
}}
/>
Aug 30, 2023, 12:14 PM
hope that made sense
Aug 30, 2023, 12:15 PM
`useClient`is a React Hook which can only be called inside React function component. So I think you want to use
createClient

You should create a file, e.g. sanityClient.js or .ts, and export you configured client and imageBuilder from.


// sanityClient.js
import {createClient} from '@sanity/client'
import imageUrlBuilder from '@sanity/image-url'

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset-name',
  useCdn: true,
  apiVersion: '2023-05-03'
})

const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source)
Then import
client
and/or
urlFor
from the file created above. E.g.
import {urlFor} from './sanityClient'

Note that
'./sanityClient'
is the path to the file, relative from the file that are importing.
Aug 30, 2023, 12:49 PM
It worked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 yay!! thanks!!!!
Aug 30, 2023, 1:33 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?