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

Question

我想从父组件获取属性变化的字符（并且使用这些 props），我试图将 useQuery 放入方法中，并且运行这个方法在 prop 变化时但是有些东西不工作，我也想使用 useQuery 中的 {result, error, loading}。

代码如下：

<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>

你们知道我该怎么做吗？ <3 求助。

我收到此错误：

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.

Answer 1

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

If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

您可以在异步部分之前使用 useQuery 并在其中使用 useResult。

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')
)

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

Cannot fetch query inside async method, cant import graphql queries from outside

typescript

vue.js

graphql

vue-composition-api

vue-apollo

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

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

用法