Блог

С помощью генератора кода graphql Vue мы создали следующий рабочий запрос, который возвращает настройки приложения:

 const { result, loading, error } = useViewerQuery()
const preference = useResult(result, null, (data) => data.viewer.preference)
  

Мы хотели бы получать настройки только один раз, сразу после аутентификации пользователя в MainLayout.vue компоненте, поэтому мы можем использовать счетчик, основанный на loading ссылке, прежде чем мы сможем отобразить полный пользовательский интерфейс на правильном пользовательском языке (который исходит из настроек).

Проблема, с которой мы сталкиваемся, заключается в том, чтобы запускать userViewerQuery запрос только тогда, когда ссылка isAuthenticated установлена true в функции MainLayout.vue настройки. Кажется, мы не можем выставить loading error ссылки и, когда они находятся внутри watchEffect функции.

 // MainLayout.vue
<script>
import { defineComponent, watchEffect } from '@vue/composition-api'
import { isAuthenticated } from 'src/store/authStore'
import { useViewerQuery } from 'src/graphql/generated/operations'

export default defineComponent({
  setup(_, { root }) {
    watchEffect(() => {
      if (isAuthenticated.value === true) {
        const { result, loading, error } = useViewerQuery()
      }
    })

    return {
      isAuthenticated,
      loading,
      error,
    }
  },
})
</script>
  

Затем позже мы просто хотели бы использовать настройки, полученные в Settings.vue компоненте. Поскольку они уже извлечены данные для настроек должны быть кэшированы и легкодоступны:

 // Settings.vue
const { result } = useViewerQuery()
const preference = useResult(result, null, (data) => data.viewer.preference)
  

Возможно, мы подходим к этому неправильно. Любая помощь или совет приветствуются.

Я понял это благодаря этому совету . При использовании useQuery с Vue Apollo вызывается опция enabled , которая определяет, выполняется ли запрос или нет.

Из документов:

 const enabled = ref(false)

const { result } = useQuery(gql`
  ...
`, null, () => ({
  enabled: enabled.value,
}))

function enableQuery () {
  enabled.value = true
}
  

Применяя эту логику к моей собственной ситуации, когда я хочу, чтобы запрос выполнялся только тогда, когда пользователь вошел в систему, а ссылка isAuthenticated установлена на true :

 export default defineComponent({
  setup(_, { root }) {
    const { result, loading, error } = useViewerQuery(() => ({
      enabled: isAuthenticated.value,
    }))

    watchEffect(() => {
      console.log('MainLayout isAuthenticated: ', isAuthenticated.value)
    })
    watchEffect(() => {
      console.log('MainLayout result: ', result.value)
    })

    return {
      isAuthenticated,
      loading,
      error,
    }
  },
  

Я надеюсь, что это поможет другим с подобной проблемой.

Я думаю, вы могли бы расширить ссылки и добавить свойство, которое вызывает конечную точку gql. Что-то вроде…

 export default defineComponent({
  setup() {
    const { result, loading, error, call } = useViewerQuery()
    watchEffect(async () => {
      if (isAuthenticated.value) {
          await call()
      }
    })

    return {
      isAuthenticated,
      loading,
      error
    }
  }
})