nuxt-modules / prismic

Easily connect your Nuxt.js application to your content hosted on Prismic
https://prismic.nuxtjs.org
MIT License
245 stars 48 forks source link

Route Resolver not working on Nuxt3 when routes set in createClient #173

Closed esbeto closed 1 year ago

esbeto commented 1 year ago

Versions

Reproduction

Hi, I'm testing out the latest and greatest prismic with Nuxt3, spend a few hours trying to get urls working.

I noticed the following, when setting the routes option in nuxt.config it works:

prismic: {
    client: "/app/prismic/client.ts",
    endpoint: "my-repo-name",
    clientConfig: {
      routes: [
        {
          type: "blog_article",
          path: "/blog/:category?/:uid",
          resolvers: {
            category: "blog_category",
          },
        },
      ...
      ],
    },
    linkResolver: "/app/prismic/link-resolver.ts",

...

But if I move this config to createClient, it doesn't work:

import { AllDocumentTypes } from "~~/types.generated";
export default createClient<AllDocumentTypes>(
  "my-repo-name",
  {
    routes: [
        {
          type: "blog_article",
          path: "/blog/:category?/:uid",
          resolvers: {
            category: "blog_category",
          },
        },

...

Steps to reproduce

  1. Set-up createClient
  2. Set routes in createClient config
  3. url is not resolved correctly, returns undefined
  4. Move routes to clientConfig: in nuxt.config.ts
  5. url is resolved correctly, returns what you expect

What is Expected?

I'm not sure what's the difference, and where it would make more sense to place this configuration. The fact that you can place the same configuration settings in two places made it very confusing to me, especially since I'm just getting familiarized with prismic.

lihbr commented 1 year ago

Hi there, thanks for opening an issue!

Can you try setting your paths like so? (with the ~ prefix)

{
    client: "~/app/prismic/client.ts",
    linkResolver: "~/app/prismic/link-resolver.ts",
    // ...
}

I'm afraid your current setup tries to resolve those paths from your disk root (e.g. c:/app/prismic/client.ts) because of the leading /.


Just a quick note, the client path you're trying to use is the default path the module uses, so you could also simply omit it and the module should be able to resolve it on its own.

Likewise, for the link resolver path, the default path just uses camelCase instead of kebab-case and the module will be looking for a link resolver at ~/app/prismic/linkResolver (.js or .ts) by default.

In any case, if the module successfully finds your files, it'll prompt it in the console.


Few not-so-related notes:

  1. The clientConfig option is only useful when you don't provide a client yourself, it will be ignored if the module finds a client you provided at the specified (or default) path it looks for one.
  2. Prismic Link Resolver has priority over the Route Resolver, meaning that if your Route Resolver resolves your document URLs, those can still be tampered with later on by the Link Resolver, potentially having unwanted side effects. (not sure if that makes sense, but basically the Route Resolver is applied on the API side if provided, then the Link Resolver is applied programmatically on the application side if provided)
  3. I think you're using prismic-ts-codegen according to your snippet, @prismicio/client document types can be inferred by default on your client (no need to provide a generic) if you turn on/leave on the clientIntegration option: https://prismic.io/docs/technical-reference/prismic-ts-codegen#automatic-prismicioclient-integration

Let me know if anything :) If everything's alright, feel free to close the issue~

esbeto commented 1 year ago

By using the default settings I was able to get everything working correctly. Thanks a lot for the detailed explanation it was worth the effort 🙇

lihbr commented 1 year ago

You're very much welcome!