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

Posted 2023-03-08

【中文标题】无法在异步方法中获取查询，无法从外部导入 graphql 查询

【英文标题】：Cannot fetch query inside async method, cant import graphql queries from outside

【发布时间】：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 个不同的帖子。请为第二个问题再发一篇文章，因为这两个问题似乎不相关

【参考方案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')
)