Nuxt 3 + datoCMS help needed

I have followed the documentation and example on how to get data from datoCMS using useFetch (Integrate DatoCMS with Nuxt - DatoCMS)

  1. I have created the .env file with the API token.
    File: datocms.env
    DATO_CMS_TOKEN=xxxxxxxxxxxxxxxxxxxxxx

  2. 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;
     },
  });
};
  1. 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?

I found the issue: env file cannot be named “datocms.env” it has to be just: “.env”
That fixed the problem :slight_smile:

1 Like