@prismicio/client v7 is now available

angeloashmore · May 18, 2023, 12:11am

`@prismicio/client` v7

We’re excited to announce a new major version of @prismicio/client, the core Prismic package for creating web apps with Prismic and JavaScript.

@prismicio/client v7 combines @prismicio/client, @prismicio/helpers, and @prismicio/types into one package, offering a leaner API with a smaller footprint on your project.

import { createClient, asText, RichTextField } from "@prismicio/client"

// Create a Prismic client
const client = createClient("example-repo-name")

// Query for documents
const page = await client.getByUID("page", "home")

// Convert rich text fields to plain text
const title = asText(page.data.title)
//                             ^ Typed as RichTextField

As a result of the streamlining, @prismicio/helpers and @prismicio/types are now considered deprecated.

Benefits of upgrading

One single package now covers core Prismic usage (compared to 3 required before)
Deprecated APIs from @prismcio/client v5 and v6 were removed
Deprecated APIs from @prismicio/helpers v2 were removed
Deprecated APIs from @prismicio/types v0 were removed
Improved code-splitting and tree shaking

How to upgrade

Upgrading is straightforward, but requires a few changes to your project.

See the @prismicio/client v7 Migration Guide for instructions.

Any questions?

Please leave any questions about @prismicio/client v7 here and we’ll answer as soon as possible.

If you encounter a bug or would like to request a new feature, open an issue on GitHub.

frags · May 18, 2023, 7:58am

This is great, thanks!

I am getting an interesting error with the latest packe. If I remove the fetchOptions I get this error about needing an access token

This is throwing the above error

const page = await client.getByUID("page", params.uid);

This works - is that expected?

const page = await client.getByUID("page", params.uid, {
    fetchOptions: {
      next: { revalidate: 0 },
    },
  });

nf_mastroianni · May 18, 2023, 11:18am

Last week I too received this “error.” I generated a token in prismic and included it with the client request per their docs. That resolved it. Not sure why it would be needed though since the API settings are the same as all my previous projects that didn’t need it.

erik.israni · May 18, 2023, 7:34pm

andre.lergier · May 19, 2023, 9:04am

Is it possible that type inferring somehow changed with this update?

I newly get the following error Parameter 'page' implicitly has an 'any' type. with functions like getAllByType or getByUID.

Therefore the parameters just always have any type and so Typescript makes no sense.

If I add the type manually, everything works as expected:

const pages: Content.PageDocument[] = await client.getAllByType('page');

const page: Content.SalePropertyDocument = await client.getByUID('sale_property', uid);

I would prefer if those types are automatically inferred correctly - I guess as they used to until now.

angeloashmore · May 25, 2023, 2:28am

Hi @frags, @nf_mastroianni, and @andre.lergier,

Thanks for reaching out!

@frags: I am getting an interesting error with the latest packe. If I remove the fetchOptions I get this error about needing an access token

This happens because Next.js caches all fetch() requests by default. { revalidate: 0 } effectively configures Next.js to ignore the cache.

Caching causes the "Access to this Ref requires an access token" error because @prismicio/client is trying to fetch content from an old version of your Prismic repository that is no longer valid. The cache must be cleared or ignored in order to fetch the most recent content.

We recommend setting up your client with the following fetchOptions:

const client = prismic.createClient(repositoryName, {
  routes,
  fetchOptions: {
    cache: process.env.NODE_ENV === "production" ? "force-cache" : "no-store",
    next: { tags: ["prismic"] },
  },
  ...config,
});

cache: 'force-cache' tells the App Router to always cache Prismic requests. Caching queries results in the best website performance.

next: { tags: ['prismic'] } allows for clearing Prismic queries from the fetch() cache. The prismic tag is used with On-demand Revalidation. See the Deploy section for more details on setting up On-demand Revalidation.

The cache and next parameters can be overridden on individual queries as needed.

We are working on updating our documentation with this updated recommendation. Thank you for your patience as we discover best practices for the App Router.

@nf_mastroianni: Last week I too received this “error.” I generated a token in prismic and included it with the client request per their docs. That resolved it. Not sure why it would be needed though since the API settings are the same as all my previous projects that didn’t need it.

Could you try the above settings? You shouldn't need an access token unless you want to keep your API secure.

@andre.lergier: Is it possible that type inferring somehow changed with this update?

I newly get the following error Parameter 'page' implicitly has an 'any' type. with functions like getAllByType or getByUID.

There was a bug in the underlying prismic-ts-codegen package that caused an error in projects' generated TypeScript types.

You can find more details on the bug and fix here: fix: restore `@prismicio/client` integration by angeloashmore · Pull Request #46 · prismicio/prismic-ts-codegen · GitHub

Could you update to the latest version of prismic-ts-codegen in your project?

npm update prismic-ts-codegen

andre.lergier · May 25, 2023, 7:42am

Hi @angeloashmore, thanks for you answer.
The code still behaves the same even after updating prismic-ts-codegen.

The return values from getByUID or getAllByType still have any type.

angeloashmore · May 25, 2023, 9:53pm

Hey @andre.lergier,

Sorry for the confusion. I left out an important detail: after updating prismic-ts-codegen, you'll need to regenerate your TypeScript types.

If you are using prismic-ts-codegen's CLI, you can regenerate types using:

npx prismic-ts-codegen

If you are using Slice Machine with @slicemachine/adapter-next, you can regenerate types by editing a Slice. We don't have a streamlined way of regenerating types on-demand, so you will need to add a field to a Slice, save it, remove the field, then save again.

We plan to update the adapters in the future so type generation automatically happens when Slice Machine starts up.

andre.lergier · May 25, 2023, 10:34pm

Hey @angeloashmore

You're right, that was it - now it works again, very nice!
Thank you for your support.

jbcazaux · May 30, 2023, 10:17am

hey, i just open a new question about client 7 and Content Relationship definition of type.

ali · May 31, 2023, 6:10pm

Problem persist for us for last library in nextjs