👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect

Troubleshooting the use of CDN in a Sanity.io project

18 replies
Last updated: Sep 17, 2022
Hi all, I feel like I’m missing something super obvious regarding the CDN.
I’ve set
useCDN: true
and yet when I build, it still gives me the warning that I’m not using the CDN.
const options = {
	projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
	dataset: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME,
	apiVersion: "2022-01-18", //date project was initialized
	useCDN: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME === "production", <= results in true
};
When I inspect my site, I see the images have an address which includes
<http://cdn.sanity.io|cdn.sanity.io>
What am I missing?
Sep 15, 2022, 6:53 PM
What warning? 🙂
Sep 15, 2022, 6:57 PM
useCdn
tells the JS client to fetch using either the API (if false; api.sanity.io ) or the API CDN (if true; apicdn.sanity.io ). Images will always use the asset CDN regardless of the
useCdn
setting, at the slightly different URL
<http://cdn.sanity.io|cdn.sanity.io>
.
Sep 15, 2022, 7:50 PM
If it has
api
in the URL, it’s fetching a document. If it doesn’t, it’s fetching an asset.
Sep 15, 2022, 7:51 PM
user F
Sep 16, 2022, 2:16 PM
user A
any thoughts on how to resolve this info/warning note in my console?
Sep 16, 2022, 2:17 PM
As the error mentions, there’s a client configured somewhere where
useCdn
is not specified. If you change your ternary in
options
to a hard-coded true or false and the warning goes away, you’ll know it’s this config. If it doesn’t, it’s somewhere else.
Sep 16, 2022, 2:20 PM
Right, i hardcoded both of my files to
true
and i still got that error.
Sep 16, 2022, 2:22 PM
I would do a search for
client
(exclude node_modules) and see where there’s a client configured without
useCdn
.
Sep 16, 2022, 2:23 PM
I did a search for
client
and the only file that seemed relevant was this, so I added a
useCDN: true
property but it didn’t seem to impact the warning
Sep 16, 2022, 2:31 PM
From the looks of your first screenshot, it seems the warning is appearing when you run your front end app, so that’s where you’ll want to check for the use of
useCdn
. The most recent screenshot is in your studio directory.
Sep 16, 2022, 6:57 PM
Yeah, for sure. I’m actually working with a mono-repo so I did a search-all in VS Code looking for any mentions of
client
and all I got were the 3 files mentioned above and the groq API file. Do you potentially have any other ideas or tips?
Sep 16, 2022, 8:27 PM
Can you post
helpers/sanity.js
?
Sep 16, 2022, 9:39 PM
My guess is that your client in
helpers/sanity.js
is not configured explicitly with
useCdn
(side note: if not configured, it defaults to false). Typically, you’ll see something like this to configure the client in a helper file:

import sanityClient from '@sanity/client';

export const client = sanityClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  apiVersion: '2022-09-16', // use current UTC date - see "specifying API version"!
  token: 'sanity-auth-token', // or leave blank for unauthenticated usage
  useCdn: true, // `false` if you want to use the API
});
Then you’ll use
import { client } from 'helpers/sanity'
and can do
client.fetch()
.
Sep 16, 2022, 10:31 PM
Hey Geoff, actually my
/helpers/sanity.js
file is what I shared in my initial message
import sanityClient from '@sanity/client';

const options = {
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID, //points to the .env.local file
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME, //points to the .env.local file
    apiVersion: '2022-01-18', //date project was initialized
    useCDN: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME === "production" // use false for dev or true for optimized speeds with cached data
};

export default sanityClient(options);
Sep 17, 2022, 5:36 PM
Then my
/studio/lib/isUniqueAcrossAllDocuments.js
file is this
import sanityClient from "part:@sanity/base/client";
const client = sanityClient.withConfig({apiVersion: '2022-01-18'})

// Note: this assumes that every document that has a slug field
// has it on the `slug` field at the root
export function isUniqueAcrossAllDocuments(slug, options) {
  const { document } = options;

  const id = document._id.replace(/^drafts\./, "");
  const params = {
    draft: `drafts.${id}`,
    published: id,
    slug,
  };

  const query = `!defined(*[
      !(_id in [$draft, $published]) && 
      slug.current == $slug
    ][0]._id)`;

  return client.fetch(query, params);
}
Sep 17, 2022, 5:36 PM
This is
helpers/generateRedirects.js

// Referenced in /next.config.js
const sanityClient = require("@sanity/client");

const options = {
	projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID, //points to the .env.local file
	dataset: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME, //points to the .env.local file
	apiVersion: "2022-01-18", //date project was initialized
	useCDN: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME === "production", // use false for dev or true for optimized speeds with cached data
};

const client = sanityClient(options);

const redirectsProjects = `
    redirectList[]{
        destination,
        source,
        permanent,
		basePath
    }
`;

async function generateRedirects() {
	const redirects = await client.fetch(
		`
        *[_type == "redirects"][0] {${redirectsProjects}}
        `
	);
	return redirects.redirectList || [];
}
module.exports = {generateRedirects};
Sep 17, 2022, 5:36 PM
And the last file which showed
client
was
helpers/api.js

import sanityClient from "helpers/sanity";
import imageUrlBuilder from "@sanity/image-url";

// Bunch of projections

export async function getBlogBySlug(slug) {
  const results = await sanityClient.fetch(
    `
      *[_type == "blog" && slug.current == $slug][0] {${singleBlogProjection}}
    `,
    { slug }
  );
  return results;
}

// Bunch more queries

const builder = imageUrlBuilder(sanityClient);
export function urlFor(source) {
  // This builder lets you provide additional parameters
  return builder.image(source);
}
Sep 17, 2022, 5:38 PM
So maybe I’m missing parameters on that last file,
helpers/api.js
?
Sep 17, 2022, 5:38 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?