I have followed the documentation and example on how to get data from datoCMS using useFetch (Integrate DatoCMS with Nuxt - DatoCMS)
-
I have created the .env file with the API token.
File: datocms.env
DATO_CMS_TOKEN=xxxxxxxxxxxxxxxxxxxxxx -
In composables I have created file useGraphqlQuery.js:
export default (options) => {
const { query, variables = {} } = options;
const runtimeConfig = useRuntimeConfig();
const key = JSON.stringify(options);
return useFetch('https://graphql.datocms.com', {
key,
method: 'POST',
headers: {
Authorization: `Bearer ${runtimeConfig.public.datoCmsToken}`,
},
body: {
query,
variables,
},
transform: ({ data, errors }) => {
if(errors) throw new errors;
return data;
},
});
};
- I have created new pages file cennik-szkolen.vue:
<script setup>
const QUERY = `
query {
cennikSzkolen {
title
}
}
`;
const { data, error } = await useGraphqlQuery({ query: QUERY });
console.log('Output:',data);
</script>
<template>
<p v-if="error">Something bad happened!</p>
<p v-else>Data: <code>{{ data }}</code></p>
</template>
In CDA Playground I have:
query MyQuery {
cennikSzkolen {
title
}
}
that gives me:
{
"data": {
"cennikSzkolen": {
"title": "Cennik szkoleń"
}
}
}
When I open the page I get: Something bad happened!
and in the console:
Output: RefImpl { 01:19:37
__v_isShallow: false,
dep: undefined,
__v_isRef: true,
_rawValue: null,
_value: null
}
What could be the issue here?
