URL 使用 Django、GraphQL、Apollo 和 VueJS 进行管理

Question

如标题所述，我在我的项目中使用了 Django、GraphQL、Apollo 和 VueJS。我正在将其开发为 SPA（单页应用程序）。

一切正常，直到我按下 F5 按钮并刷新页面。事实上，它显示了一个未知页面。问题是 VueRouter 正在管理 SPA，它工作正常。但是当我按 F5 时，Django 试图为当前 URL 提供页面，但由于它不知道，因此无法提供适当的页面。

我知道我可以设置 VueRouter 'history' 模式，我这样做了，并向 Django 添加了一个 URL 服务于 index.html 无论 URL 是什么。

我的问题如下：当我在特定的表单视图（即：用户表单视图）时，我的 URL 如下：

http://localhost:8000/user

由于我为 API 使用 GraphQL，因此检索到的数据不是基于 URL。事实上，这是我的 VueJS 组件，上面写着：Hey Apollo, run that GraphQL to retrieve the User I want.

所以当我刷新时，是的，它服务于用户表单视图..但是是空的。

问题是：我该如何解决这个问题？

为了清楚起见，这里有一些代码示例：

My Django URLs :

# (... other imports here ...)
from .schema import schema

urlpatterns = [
    path('admin/', admin.site.urls),
    path('graphql', csrf_exempt(GraphQLView.as_view(graphiql=True, schema=schema))),  # 'schema' is the main GraphQL schema
    path('', TemplateView.as_view(template_name='index.html')),
    re_path(r'^.*$', TemplateView.as_view(template_name='index.html'))  # I saw that many times to serve the page whatever the URL is when refreshing the page
]

My Vue Router :

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'MainApp' },
    // ...
    { path: '/users', name: 'UserList', component: UserList },
    { path: '/user/create', name: 'UserFormCreate', component: UserForm, props: true },
    { path: '/user', name: 'UserFormView', component: UserForm, props: true },
    { path: '/user/edit', name: 'UserFormEdit', component: UserForm, props: true },
    // Same pattern for other models like 'Group' ...
  ]

My Example VueJS Component :

<script>
import {
  // ...
  USER_QUERY,
  // ...
} from '../../graphql/base/user.js'

export default {
  name: 'UserForm',
  props: {
    userId: Number,
    editing: {
      type: Boolean,
      default: false
    }
  },
  apollo: {
    user: {
      query: USER_QUERY,
      variables () { return { id: this.userId } },
      skip () { return this.userId === undefined },
      result ({ data }) {
        this.form.username = data.user.username
        this.form.firstName = data.user.firstName
        this.form.lastName = data.user.lastName
      }
    }
  },
  data () {
    return {
      form: {
        username: '',
        password: '',
        firstName: '',
        lastName: ''
      },
      // ...
    }
  },
  methods: {
    // ...
  }

我不得不提一下，我看到了或多或少的相关主题，但这并不能解决我的问题。

在此先感谢您的帮助！

Answer 1

编辑您的路线路径以使用参数。例如：

{ path: '/user/:userId', name: 'UserFormView', component: UserForm, props: true }

现在，应用程序会将 user/ 路径后的任何数字解释为名为 userId 的道具。（props: true 在这里使用参数作为道具很重要。）

您唯一需要做的其他更改是调整您的路由器链接以包括 id 以及（例如：http://localhost:8000/user/1），这样当页面刷新时，就会有要读取的参数。

URL 使用 Django、GraphQL、Apollo 和 VueJS 进行管理

URL management with Django, GraphQL, Apollo and VueJS

django

vue.js

graphql

vue-router

vue-apollo