Import the GraphQL file in nuxt.js.

Question

So I'm importing the schema generated by postgraphile, but it's not loading correctly.

This is the type of output:

definitions: Array(44) [ {…}, {…}, {…}, … ]
kind: "Document"
loc: Object { start: 0, end: 26188, source: {…} }

I have tried various code variations to load my query allUsers.

<script setup>
import Schema from '@/graphql/schema.gql'

console.log('Query', Schema.valueOf('allUsers'))

const { data } = await useAsyncQuery(Query)
</script>

Answer 1

The valueOf method is not suitable for this purpose. GraphQL schema documents do not have direct access to their queries, mutations, or subscriptions via key-value access methods. ,

First, make sure you have installed the graphql-tag package in your project:

npm install graphql-ta

Define your query in schema.gql:

query AllUsers {
  allUsers {
    nodes {
      id
      name
      # other fields...
    }
  }
}

Import and use AllUsers query in the component:

<script setup>
import { useQuery } from "@vue/apollo-composable";
import { loader } from "graphql.macro";

const Schema = loader('@/graphql/schema.gql');

const { result } = useQuery({
  query: Schema.AllUsers
});

// Here, 'result' will contain your fetched data when available.
</script>

Hope it’s useful