Troubleshooting the use of CDN in a Sanity.io project
18 replies
Last updated: Sep 17, 2022
D
Hi all, I feel like I’m missing something super obvious regarding the CDN.
I’ve set
When I inspect my site, I see the images have an address which includes
I’ve set
useCDN: trueand 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 };
<http://cdn.sanity.io|cdn.sanity.io>What am I missing?
Sep 15, 2022, 6:53 PM
K
What warning? 🙂
Sep 15, 2022, 6:57 PM
useCdntells 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
useCdnsetting, at the slightly different URL
<http://cdn.sanity.io|cdn.sanity.io>.
Sep 15, 2022, 7:50 PM
If it has
apiin the URL, it’s fetching a document. If it doesn’t, it’s fetching an asset.
Sep 15, 2022, 7:51 PM
D
user F
Sep 16, 2022, 2:16 PM
D
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
useCdnis not specified. If you change your ternary in
optionsto 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
D
Right, i hardcoded both of my files to
trueand 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
D
I did a search for
clientand the only file that seemed relevant was this, so I added a
useCDN: trueproperty 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
D
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
clientand 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
My guess is that your client in
Then you’ll use
helpers/sanity.jsis 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 });
import { client } from 'helpers/sanity'and can do
client.fetch().
Sep 16, 2022, 10:31 PM
D
Hey Geoff, actually my
/helpers/sanity.jsfile 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
D
Then my file is this
/studio/lib/isUniqueAcrossAllDocuments.js
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
D
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
D
And the last file which showed
clientwas
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
D
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.