Get help on Discord

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'
AI Update

Yes, there's an important difference! These two approaches represent different patterns for using the Sanity client in your application.

import {createClient} from '@sanity/client' - This imports the factory function directly from the Sanity client package. You'd then need to call createClient() with your configuration (projectId, dataset, apiVersion, etc.) wherever you use it.

import myConfiguredSanityClient from './sanityClient' - This imports a pre-configured client instance that you've already set up in a separate file. This is the recommended approach for most applications.

Here's why the second approach is better:

Benefits of a pre-configured client:

  • Single source of truth: You configure your Project ID, dataset, API version, and other settings once in a centralized location
  • Consistency: Every part of your app uses the same configuration automatically
  • Easier maintenance: When you need to update settings (like the API version), you only change it in one place
  • Type safety: If you're using TypeScript, you can export a properly typed client instance

Example setup:

// lib/sanityClient.js
import { createClient } from '@sanity/client';

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: true,
});

Then in your components:

// Using the pre-configured client
import { client } from './lib/sanityClient';

const data = await client.fetch('*[_type == "post"]');

If you were to import createClient directly each time, you'd have to repeat the configuration everywhere or risk inconsistencies across your application.

The pre-configured approach is especially common in Next.js projects and other framework integrations, where you'll often see the client configuration in a lib/sanity.js or similar file. Note that Project IDs are not sensitive information and can safely be committed to version control, though many developers still use environment variables for easier configuration across different environments.

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

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:

<Image source={{
	uri: urlFor(imgUrl).url()
}}
/>
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.


// 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.
It worked!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 yay!! thanks!!!!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?