Get GraphQL data automatically based on Nuxt/Vue component's name

AutoGraphql.js

import { getCurrentInstance } from 'vue';

export async function useAutoGraphql(vars = {}, options = {}) {
    let cwd = null;
    if (process.server) {
        cwd = useState('___cwd', () => process.cwd());
    } else {
        cwd = useState('___cwd');
    }
    const inst = getCurrentInstance();

    let gqlContent = null;
    const filePath = `./${inst.type.__file.replace(cwd.value, 'queries').replace(/^\//, '').replace('.vue', '.gql')}`;
    if (process.server) {
        const theQuery = await import(/* @vite-ignore */filePath);
        gqlContent = useState(filePath, () => theQuery.default.loc.source.body);
    } else {
        gqlContent = useState(filePath);
    }

    return useFetch('https://vocatio.ca/api', {
        method: 'post',
        body: {
            query: gqlContent.value,
            variables: vars,
        },
        ...options,
    });
}