Nuxt3 config for GraphQL queries using separate *.gql files

When searching for tutorials on how to perform GraphQL queries in Nuxt 3, I noticed that the query itself is always inside the component where it should be used. Wouldn’t it be much cleaner to store the queries in separate .gql files and use them in components? So far, I haven’t found a corresponding tutorial.

Furthermore, I’m not sure whether it is sufficient to use the useFetch composable in Nuxt 3 or if I need the nuxt-apollo module.

At the end of the day, I want to be able to perform GraphQL queries to a headless WordPress API.