无法在异步方法中获取查询，无法从外部导入 graphql 查询答案

【问题标题】：Cannot fetch query inside async method, cant import graphql queries from outside无法在异步方法中获取查询，无法从外部导入 graphql 查询
【发布时间】：2021-10-24 21:35:24
【问题描述】：

我想从父组件获取属性更改的字符（并且 ofc 使用这些道具），我尝试将 useQuery 放入方法中，并在道具更改时运行此方法但有些东西不起作用，我也想使用 @ 987654321@ 来自 useQuery。

代码如下：

<script lang="ts">
import { ref, defineComponent, watch } from "vue";
import gql from "graphql-tag";
import { useQuery, useLazyQuery, useResult } from "@vue/apollo-composable";

export default defineComponent({
  props: {
    message: [String],
  },

  setup(props) {
    const pageNumber = ref<number>(1);

    const variables = ref({
      page: pageNumber.value,
      name: props.message,
    });

    const fetchCharacters = async () => {
      const { result, error, loading } = await useLazyQuery(
        gql`
          query getCharacters($page: Int!, $name: String!) {
            characters(page: $page, filter: { name: $name }) {
              info {
                count
                pages
              }
              results {
                id
                name
                image
                gender
                species
                episode {
                  episode
                }
              }
            }
            location(id: 1) {
              id
            }
            episodesByIds(ids: [1, 2]) {
              id
            }
          }
        `,
        variables
      );
      const characters = useResult(result);
      console.log(characters);
      return { characters, result, error, loading };
    };

    watch(props, (value) => {
      fetchCharacters();
    });

    return {};
  },
});
</script>

你们有什么想法我可以做到这一点吗？

我收到此错误：

onServerPrefetch is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

【问题讨论】：

如果您有 2 个不同的问题，请发布 2 个不同的帖子。请为第二个问题再发一篇文章，因为这两个问题似乎不相关

标签： typescript vue.js graphql vue-composition-api vue-apollo

【解决方案1】：

1。无法在异步方法中获取查询

如果您使用的是 async setup()，请确保在第一个 await 语句之前注册生命周期挂钩。

你可以在 async 部分和 useResult 之前加入 useQuery。

2。无法从外部导入 graphql 查询

如果你使用 vue-cli，你可以配置 graphql-tag/loader

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('graphql').test(/\.(graphql|gql)$/).use('graphql-tag/loader').loader('graphql-tag/loader').end();
    /* ...other loader
    config.module
      .rule('svg-sprite').use('svgo-loader').loader('svgo-loader').end();*/
  },
}

用法

import userQuery from './user.gql';
const { result } = useQuery(
  userQuery
)

或

const { result } = useQuery(
  require('./user.gql')
)

【讨论】：