Управление URL с помощью Django, GraphQL, Apollo и VueJS

Question

Как сказано в заголовке, я использую Django, GraphQL, Apollo и VueJS в моем проекте. Я разрабатываю его как SPA (одностраничное приложение).

Все работает нормально, пока я не нажму кнопку F5 и не обновлю sh страницу. Действительно, это показывает неизвестную страницу. Дело в том, что VueRouter управляет SPA и работает нормально. Но когда я нажимаю F5, это Django, который пытается обработать страницу для текущего URL, и поскольку он не знает ее, он не может обслуживать соответствующую страницу.

Я знаю, что могу установить режим VueRouter 'history', который я сделал, и добавьте URL к Django, который обслуживает индекс. html независимо от того, что URL.

Моя проблема заключается в следующем: когда я нахожусь на определенном представление формы (т. е. представление формы пользователя), мой URL-адрес:

http://localhost:8000/user

Поскольку я использую GraphQL для своего API, полученные данные не основаны на URL-адресе. , Фактически, это мой VueJS компонент, который говорит: Hey Apollo, run that GraphQL to retrieve the User I want.

Поэтому, когда я ссылаюсь sh, да, он служит представлению формы пользователя ... но пустым.

вопрос: как я могу решить эту проблему?

Для пояснения, вот несколько примеров кода:

Мои Django URL:

# (... 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
]

Мой Vue Маршрутизатор:

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' ...
  ]

Мой пример VueJS Компонент:

<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 ), чтобы при обновлении страницы имелся параметр для чтения.