Question

场景

用户通过身份验证时（isAuthenticated booelan ref）：

通过对后端（useViewerQuery）的graphql调用来检查用户是否具有偏好设置
如果没有用户偏好设置，请设置默认值（useSetPreferenceDefaultMutation）

问题

查询和变异都可以在graphql Playground和Vue应用程序中正常工作。它们是通过graphql codegenerator生成的，useQuery在后台使用了useMutation和here。

我们遇到的问题是我们无法定义正确的顺序。有时useSetPreferenceDefaultMutation在useViewerQuery之前执行。这会将用户设置重置为默认设置，而不是所需的行为。

此外，在页面刷新上，所有功能均正常运行。但是，关闭重新打开的页面时，它始终调用useSetPreferenceDefaultMutation。

代码

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

    const {
      mutate: setDefaultPreferences,
      loading: mutationLoading,
      error: mutationError,
      called: mutationCalled,
    } = useSetPreferenceDefaultMutation({
      variables: {
        language: 'en-us',
        darkMode: false,
      },
    })

    onMounted(() => {
      watchEffect(() => {
        if (
          isAuthenticated.value &&
          !queryLoading.value &&
          !queryResult.value?.viewer?.preference &&
          !mutationCalled.value
        ) {
          void setDefaultPreferences()
        }
      })
    })

    return {
      isAuthenticated,
      loading: queryLoading || mutationLoading,
      error: queryError || mutationError,
    }
  },
})

失败的努力

我们开了here和enter image description here问题，为useQuery或useMutation提供了更多选择，这可能对我们的情况有所帮助，但没有运气。
在fetch上将sync或post与watchEffect选项一起使用
使用watch代替watchEffect

Answer 1

感谢@xadm的评论，现在通过在查询中使用onResult event hook进行了修复，因此它将在以后执行该变异。

onResult（handler）：有新结果可用时调用事件挂钩。

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

    const {
      mutate: setDefaultPreferences,
      loading: mutationLoading,
      error: mutationError,
    } = useSetPreferenceDefaultMutation({
      variables: {
        language: 'en-us',
        darkMode: false,
      },
    })

    onQueryResult((result) => {
      if (!result.data.viewer.preference) {
        void setDefaultPreferences()
      }
    })

    return {
      isAuthenticated,
      loading: queryLoading || mutationLoading,
      error: queryError || mutationError,
    }
  },
})

提取查询后有条件地执行graphql突变

1 个答案: