Dynami c Slug не заполняет URL с помощью GraphQL и Nuxt - PullRequest
Новая
       107

Dynami c Slug не заполняет URL с помощью GraphQL и Nuxt

0 голосов
/ 03 мая 2020

Я использую Strapi, Graphql и Nuxt. js, чтобы получить список проектов, а затем отобразить один проект на основе нажатой кнопки, который должен сопровождать фрагмент имени проекта в параметрах маршрута.

Запрос Graphql выглядит следующим образом и работает на игровой площадке, если я передаю слаг в переменной. 

query GetProject($slug: String!) {
  projects(where: {slug: $slug}) {
    id
    name
    slug
  }
}

Запрос переменных 

{
  "slug": "tunnel-to-new-york"
}

результат 

{
  "data": {
    "projects": [
      {
        "id": "5ea7904136a59018ac9ffb54",
        "name": "Tunnel to New York",
        "slug": "tunnel-to-new-york"
      }
    ]
  }
}

На странице проектов кнопка 

<v-btn to="/projects/`${slug}`">Model + Details</v-btn>

, а в запросе Apollo на странице списка проектов 

apollo: {
    projects: {
      prefetch: true,
      query: projectsQuery,
      variables() {
        return { slug: this.$route.params.slug };
      }
    }
  },

то, что отправляется в адресную строку, 

http://localhost:3000/projects/%60$%7Bslug%7D%60

, если я ввожу слаг, например, 

http://localhost:3000/projects/tunnel-to-new-york

, то при ошибке отсутствует параметр - он возвращает массив вместо объекта

enter image description here

один запрос проекта - 

query GetProject($slug: String!) {  
projects(where: {slug: $slug}) {
    id
    name
    slug   } }

и в _slug. vue

apollo: {
    project: {
        prefetch: true,
        query: projectQuery,
        variables () {
            return { slug: this.$route.params.slug }
        }
    }
}

Любые идеи будут оценены!

1 Ответ

0 голосов
/ 04 мая 2020

, поэтому проблема не заключалась в том, чтобы связать 'с' в кнопке - двоеточие отсутствовало и изменилось {slug} на {projects.slug} 

<v-btn :to="`/project/${project.slug}`">Model + Details</v-btn>

благодаря Jeffery Biles https://www.youtube.com/watch?v=NS0io3Z75GI&list=PLPwpWyfm6JACZm5kqu6p4s7XHXbAQ7fP-

...