Nuxt 3 graphql integration

🆘 Support
1

I’ve used Dato a bunch with Nuxt 2, but tryin got use it as I upgrade to Nuxt 3. Nuxt 3 has been lacking in support for integrations, so I was wondering if you have any examples of using Nuxt 3 with Dato CMS. Currently, I am trying it by using the nuxt-graphql-client. I am getting this error:

Cannot start nuxt: Failed to load schema for “gql-sdk.ts” 09:49:51
Failed to load schema from https://graphql.datocms.com:

    Could not obtain introspection result, received: {"data":[{"id":"5413bc","type":"api_error","attributes":{"code":"INVALID_AUTHORIZATION_HEADER","details":{}}}]}

Currently, I am doing this in my nuxt config:

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  modules: ["@nuxtjs/tailwindcss", "nuxt-graphql-client"],

  runtimeConfig: {
    public: {
      "graphql-client": {
        clients: {
          default: {
            host: "https://graphql.datocms.com",
            token: {
              name: "DATOCMS-Read-Only-Token",
              value: process.env.DATO_API_TOKEN,
              type: 'Bearer',
            },
            retainToken: true,
          },
        },
      },
    },
  },
});

My repo is public here as well: GitHub - daletom/datonuxt3

You will notice my env file is in there, it is showing my readonlytoken from Dato, so no big deal :slight_smile:

I don’t have to use nuxt-graphql-client, open to any ideas. Or, hopefully this is just something simple I am messing up with authentication. Thanks!

2

I have not used the “nuxt-graphql-client” package, but it looks like the prop name should be “graphql” instead of “graphql-client”. I decided to make my own implementation of graphql-codegen and graphql-request for Nuxt 3 instead of going for a package. I can confirm that it works like a charm if you’re up for not using a package.

3

oooh, would love to see that Dan. Do you have an example of the graphql-codegen?

4

When I’m adding the graphql instead of qraphql-client, I know I need to do something like this instead:

public: {
GQL_HOST: “https://graphql.datocms.com”,
apiSecret: {
name: “DATOCMS-Read-Only-Token”,
value: process.env.DATO_API_TOKEN,
type: ‘Bearer’,
},

I’m just not sure how to pass the the auth. It just gives the same error.

5

Hello @tomdale

We’re currently working on a VUE3 and NUXT3 demo to add to the starter projects that will hopefully clear things up, i’ll send you another message over here when it is out :slight_smile:

1 Like
6

Sorry for a late reply @tomdale.
This is our codegen yaml file.
schema:

  • https://graphql.datocms.com:
    headers:
    Authorization: ${Dato token env variable}
    X-Environment: ${Dato environment env variable }
    documents: <path to gql query file>
    overwrite: true
    generates:
    <path to where you want the generated file>
    plugins:
    • typescript
    • typescript-operations
    • typescript-graphql-request
    • add:
      content: ‘/* eslint-disable */’
      config:
      flattenGeneratedTypes: true
      flattenGeneratedTypesIncludeFragments: true
      namingConvention:
      enumValues: keep

Hope it helps you out, have a great weekend! :slight_smile:

1 Like
7

Hello I’m working on a Nuxt 3 project too have you been able to get image blocks to render inside of structured text? Vue.js/Nuxt.js - Structured Text fields - DatoCMS Docs the Dato documentation is inconsistent and I can’t quite work it out…

8

Sorry for a late reply, yes we have managed to render structured text but we wrote our own parser.
It looks for me like you need to make your own render function and send them in as a prop with these names. So basically you tell the structured text component how you want to render this elements with your own render function.

        :renderInlineRecord="renderInlineRecord"
        :renderLinkToRecord="renderLinkToRecord"
        :renderBlock="renderBlock"
1 Like