首页 > 解决方案 > 使用 graphQL 的 Nuxt 动态路由填充

问题描述

在 nuxtconfig.js 你可以使用 generate: { routes() {} }

为您的应用返回所有动态路由。

所有示例都使用 axios 即:

import axios from 'axios'

export default {
  generate: {
    routes: function () {
      return axios.get('https://my-api/users')
      .then((res) => {
        return res.data.map((user) => {
          return {
            route: '/users/' + user.id,
            payload: user
          }
        })
      })
    }
  }
}

我如何使用 graphQL / apollo 做到这一点?

我已经尝试过这个和其他一些组合......

let v
  apollo: {
    posts: {
      query: gql`
        query posts {
          posts {
            title
          }
        }
      `,
      result({ data, loading, networkStatus }) {
        v = data
      }
    }
  },

  generate: {
    subFolders: true,
    routes: function() {
      return {
        route: '/posts/' + v.title,
        payload: v
      }
    }
  },

错误是我认为 apollo 不能在 nuxtconfig 中使用?

这也行不通

  generate: {
    routes: function() {
      apollo: {
        posts: {
         query:`query posts {
           posts {
            title
          }
        }
      `,
      result({ data, loading, networkStatus }) {
       return {
        route: '/posts/' + data.title,
        payload: data
       }
      }
    }
  },

    }
  },

标签: graphqlapollonuxt.js

解决方案


推荐阅读