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

is there a difference between
and import {createClient} from '@sanity/client'

I believe we use createClient inside sanityClient.ts to configure our client.

createClient

from

@sanity/client

initializes a new Sanity Client with the provided config, e.g.

projectId

,

dataset

etc.

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'

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?

Well, i'm following a tutorial and this is how he does it:

hope that made sense

`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.


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.

It worked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 yay!! thanks!!!!