TestGraph.vue

<template>
    <div>
        <button @click="send">Fetch Results</button>
        <div v-if="results">
            <pre>
                {{results}}
            </pre>
        </div>
    </div>
</template>

<script>
export default {
    name: "TestGraph",
    data(){
        return{
            results: null,
            query:`{
                farmFactories(first: 10) {
                    id
                    farmCount
                }
                farms(first: 10) {
                    id
                    createdAtTimestamp
                    createdAtBlockNumber
                    reward {
                        id
                    }
                }
            }`
        }
    },

    methods: {
        async send(){
            let x = await axios({
                method: "POST",
                url: "https://api.thegraph.com/subgraphs/name/crispymangoes/mumbaifarmcompounder",
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: {
                    query: this.query
                }
            });
            this.results = x.data;
        }
    }
}
</script>

<style scoped>

</style>