Is there a way to fetch characters from the parent component when a property changes and utilize these props? I attempted to use the useQuery function within a method and execute this method on prop change, but it seems like something is not functioning correctly. Additionally, I would like to make use of {result, error, loading} provided by useQuery.
The code snippet is as follows:
<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>Any suggestions on how to achieve this successfully? Your help is greatly appreciated.
An error message I am encountering:
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.