Kérunix Posts - Answer Overflow

Kérunix

•Created by Kérunix on 4/12/2024 in #❓・help

How to have a different "default" page in nested routing

Hey there ! I'm facing an issue related to nested routing. Using the following folder structure:

├── providers
│   └── [provider]
│       ├── domains
│       │   ├── [domain]
│       │   │   ├── general-informations.vue
│       │   │   ├── index.vue
│       │   │   └── localisation.vue
│       │   └── [domain].vue
│       ├── domains.vue
│       └── home.vue
└── providers.vue

├── providers
│   └── [provider]
│       ├── domains
│       │   ├── [domain]
│       │   │   ├── general-informations.vue
│       │   │   ├── index.vue
│       │   │   └── localisation.vue
│       │   └── [domain].vue
│       ├── domains.vue
│       └── home.vue
└── providers.vue

I would like the route under providers/[provider]/domains/[domain]/ to be set by default to providers/[provider]/domains/[domain]/general-information because my UI does not need an "index" page for the details of a domain and the "default" page when navigating to /providers/1/domains/1 should be /providers/1/domains/1/general-informations. I'm using Nuxt i18n with a prefix_and_default stategy, so I can't setup an alias in general-informations.vue using definePageMeta because I can't access the local in a simple way there. I'va also tried setting up a middleware in index.vue like this :

definePageMeta({
  middleware: [
    async function (to) {
      const { $getRouteBaseName } = useNuxtApp()
      if ($getRouteBaseName(to) === 'providers-provider-domains-domain') {
        // Custom helper to abstract i18n route navigation, nothing to do with the              // issue at hand
        await navigateToLocalePath({
          name: 'providers-provider-domains-domain-general-informations',
          params: {
            provider: 1,
            domain: 1,
          },
        })
      }
    },
  ],
})

definePageMeta({
  middleware: [
    async function (to) {
      const { $getRouteBaseName } = useNuxtApp()
      if ($getRouteBaseName(to) === 'providers-provider-domains-domain') {
        // Custom helper to abstract i18n route navigation, nothing to do with the              // issue at hand
        await navigateToLocalePath({
          name: 'providers-provider-domains-domain-general-informations',
          params: {
            provider: 1,
            domain: 1,
          },
        })
      }
    },
  ],
})

But, even if I can successfully log a message inside my if statement, the redirection does not happen (which is weird since the same call in something like onMounted works). Do you have any idea of how I could make it work ?

12 replies

NNuxt

•Created by Kérunix on 3/8/2023 in #❓・help

Fetching related data sequentially

I'm working on a nuxt 3 app at work and our backend returns relational data as ids that I need to fetch if I want to display it. For example let's say we're building a blog, the interfaces would look something like this

interface Post {
  id: number
  title: string
  content: string
  author: number
  comments: number[]
}

interface Author {
  id: number
  firstname: string
  lastname: string
  posts: number[]
  comments: number[]
}

interface Comment {
  id: number
  content: string
  author: number
}

interface Post {
  id: number
  title: string
  content: string
  author: number
  comments: number[]
}

interface Author {
  id: number
  firstname: string
  lastname: string
  posts: number[]
  comments: number[]
}

interface Comment {
  id: number
  content: string
  author: number
}

Now let's say I want to display a list of posts with informations about their authors on a page. I'd first fetch the posts with something like

const { posts } = await useAsyncData(() => useMyApi().fetchPosts())

const { posts } = await useAsyncData(() => useMyApi().fetchPosts())

Then i would have to fetch the authors based on the ids contained in posts so something like

const { authors } = await useAsyncData(() => useMyAPi().fetchAuthorsByIds(posts.value.map((post) => post.author)))

const { authors } = await useAsyncData(() => useMyAPi().fetchAuthorsByIds(posts.value.map((post) => post.author)))

But this won't work since the second request would fire immediately, so posts.value.map would fail or return an empty array. I could to this in the transform of the first useAsyncData, fetching my relations once I have the base data, but this would cause issues the moment the relations I'm fetching have relations of their own... So I'm wondering how you folks would do it ?

13 replies

Gaming

Programming