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

Question

i want to fetch characters on property change from parent component (and ofc use these props), i tried to put useQuery into method, and run this method on prop change but something is not working, also i would like to use {result, error, loading} from useQuery.

here is the code:

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

Do you guys have any ideas how I can do this? <3 Ty for help.

I receive this error:

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.

If you have 2 distinct questions make 2 distinct posts. Please make another post for the second question, since those 2 issues doesn't seem related — Joyescat
– Joyescat, Commented Aug 24, 2021 at 18:07

Alukos · Accepted Answer · 2021-09-02 10:09:50Z

1

1. Cannot fetch query inside async method

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

You can involve useQuery before async part and useResult in it.

2. cant import graphql queries from outside

If you using vue-cli, you can config 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();*/
  },
}

Usage

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

or

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

answered Sep 2, 2021 at 10:09

Alukos

1201 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

1. Cannot fetch query inside async method

2. cant import graphql queries from outside

Usage

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. Cannot fetch query inside async method

2. cant import graphql queries from outside

Usage

Comments

Your Answer

Sign up or log in

Post as a guest

Related