Route Resolver Conditionals

Developing with Prismic
1

In reference to Route Resolvers (Route Resolver - Prismic), if my Link Resolver routes are as follows, how would I accomplish it with a Route Resolver?

if (doc.type === "home") {
  return doc.lang == "en-us" || !doc.lang ? "/" : `/${doc.lang}`;
}

if (doc.type === "event") return urlLangMapper(doc, "/events");

let urlLangMapper = (doc, url = "") => (doc.lang == "en-us" || !doc.lang ? `${url}/${doc.uid}` : `/${doc.lang}${url}/${doc.uid}`);
3

Hello @chris.davis,

Thanks for posting this question to us it is a good question :+1:

Currently, you cannot achieve this with the Route Resolver. You have to use link resolver for that. We have already been tracking it as a feature request for future improvement.

Thanks,
Priyanka

4

Ok then, thank you.

On another note, I'm updating my SvelteKit site to use the latest Prismic APIs (@prismicio/helpers & @prismicio/client) following this article: Get Started with Svelte - Prismic

However, when visiting a page that uses SvelteKit's dynamic routing (ex: /[uid].svelte) an error is being thrown: Cannot read properties of undefined (reading 'find')

These pages use the getByUID() query method: const document = await Client.getByUID("page", uid);

The other normal pages, which use getSingle(), work fine.

It doesn't give any other details. Any insights?

5

Hello @chris.davis

There are two ways to query with getByUID().

  1. If you do not define page params and declare uid variables, you need to use static uid for every page. For example:
    const document = await client.getByUID('page', 'hello-world')

  2. Another way is to access the page parameter and query with it:

export async function load({ fetch, page }) {
  const { uid } = page.params
  const document = await client.getByUID('page', uid)

How are you querying your page? If it still doesn't solve your issue, I'd need more detail.

Thanks,
Priyanka

6

I'm doing it the second way. FYI, SvelteKit just changed their Loading Input function parameters: Docs • SvelteKit. So, the Prismic Svelte tutoring is now technically out of date :slight_smile:

I tried testing using the first option you specified as well, stripping everything out of the page, and it still throws that error. So, I'm not sure if there's an issue with SvelteKit itself with the most recent update (1.0.0-next.232)? Maybe I'll test this on an earlier version.

On another note, I noticed that the docs for Svelte under Preview Drafts (Preview Drafts in Svelte - Prismic) are inaccurate. The redirect variable doesn't use the token and documentId variables and it just redirects to the home page.

const redirect = await client.resolvePreviewURL({defaultURL: "/"})

The Deploy App section is also out-of-date, FYI. SvelteKit uses @sveltejs/adapter-auto for Netfliy and Vercel by default now.

Thanks!

7

I just confirmed that the same error is happening on SvelteKit v1.0.0-next.203. Everything works fine when using the older APIs: @prismicio/client v5 and prismic-dom.

Also, it's just the root [uid].svelte (/src/routes/[uid].svelte) file that's not working! My other dynamic routes live inside a folder and work fine. Ex: /routes/events/[uid].svelte

So confusing, ha!

8

Hello @chris.davis

To get Previews to work with Svelte, I need more information

  1. have you defined route revolver in your Project?
  2. How did you configure the link resolver property for Previews in your Repo? It should be /preview.
  3. Did you check the value of token and documentId variables in the console.

About Deploy app: I still find this information using @sveltejs/adapter-vercel and @sveltejs/adapter-netlify. kit/packages/adapter-netlify at master · sveltejs/kit · GitHub

I am not sure about the error you are getting. I need your complete code and the Prismic repo URL to solve it.

Thanks,
Priyanka

9

For the Previews, I was just commenting that the documentation is wrong. More info on how the resolvePreviewURL method is supposed to work would be helpful too.

Depoly app: yes, you are correct, however, the default config uses @sveltejs/adapter-auto (Docs • SvelteKit).

I can probably share my Github repo if that's helpful. Let me know what your user is.

Thanks!

10

Hello @chris.davis

Thanks for pointing this out. I will pass this on to my documentation team and make the necessary changes.
resolvePreviewURL() directly returning the URL string. It also automatically reads the token and documentId URL parameters.

Thanks,
Priyanka