CDN not working good in preview mode

[liqueflies]

Is your feature request related to a problem? Please describe.

When I use nuxt preview mode, the client will refresh data with cdn API and data is not refreshed.

Describe the solution you'd like to see

I noticed that there is no way to invalidate cdn api / or change it's endpoint (from cdnUrl to hostUrl) when is into preview mode.

Describe alternatives you've considered

How about invalidate cache or switch to no-cdn mode when preview=true?

Here to help,

L.

EDIT:

an idea could be adding a parameter to fetch that can define if we are in preview or not

[danielroe]

@liqueflies Agreed - this would be a good approach. How are you implementing preview mode? Are you using { target: 'static' } and live preview or are you doing something custom?

[liqueflies]

@danielroe I am using target: static plus live preview.
I think inside plugin can be injected something useful for sanity, like a method .replaceClient()

[mornir]

1. If you're generating all your routes at build time, you shouldn't use Sanity's CDN. When content editors trigger a new build from the Studio, you always want the freshest data. And in production, the users won't hit the CDN because all the content is pre-generated.

2. You can initialize a second client with the appropriate config (no cdn, withCredentials). In the preview plugin, you can use that client to fetch the data and then pass that data to enablePreview(). (https://nuxtjs.org/docs/2.x/features/live-preview/#passing-data-to-enablepreview).

[liqueflies]

Hi @mornir,
I've understand the second point, i am going deep into it.

But not the first: if I am not using cdn api, when i am navigating with client it uses the no-cdn api - consuming bandwith, or not?

[mornir]

Do you build your website with nuxt generate? Are all the routes generated at build time? By default Nuxt crawler should crawl all dynamic routes it finds.

[mornir]

When navigating on your website, you can see in the network tab of the devtool what API calls are made.

[liqueflies]

I built usign nuxt generate and into network tab, when using client navigation, is calling the non-cdn api if I use it without withCdn.

For me is right to use the cdn api also into static website, or the plugin should switch between generation and client navigation.

I had a lot of websites built without cdn api, billing can be expansive

[mornir]

In that case, you can initialize two clients. I'll give you a link to an example.

Actually, I think it's not even necessary to make the API call inside the preview plugin.
In the asyncData hook of the page, you can also check for query.preview.

[liqueflies]

are you saying that I have initialize an additional client and switch on async data based on query string?

[liqueflies]

I just want to share the solution that worked for me:

nuxt.config.js

  sanity: {
    projectId: process.env.SANITY_PROJECT_ID,
    dataset: process.env.SANITY_DATASET,
    minimal: true,
    useCdn: true,
    additionalClients: {
      preview: {
        projectId: process.env.SANITY_PROJECT_ID,
        dataset: process.env.SANITY_DATASET,
        minimal: true,
        useCdn: false,
      },
    },
  },

preview.client.js

export default async function ({ query, enablePreview, $sanity }, inject) {
  if (query.preview) {
    $sanity.client = $sanity.preview
    $sanity.fetch = $sanity.preview.fetch
    inject('sanity', $sanity)
    enablePreview()
  }
}

Edit: I think that would be cool that pugin could handle something like this, sanity is very expansive with non-cdn api.

If you want to discuss this you can keep open, if not you can close the issue.
thank you so much,

L.