Visual Editing <ContentLink/> component for Nuxt missing from starter kit

🆘 Support
1

I am trying to play around with the new Visual Editor in my Nuxt project and struggling to get things going. I downloaded the Nuxt started kit for DatoCMS and noticed the component that is needed does not exist in the repo (https://github.com/datocms/nuxt-starter-kit/blob/main/components/ContentLink/index.vue).

I really just want to start at the very basic level and get the click-to-edit overlays to work first.

I have my query to fetch data set to put the site into draft mode and that is working properly to retrieve draft content when I test it out.

export default (query, options) => {
  const variables = options?.variables || {};
  const runtimeConfig = useRuntimeConfig();

  // Create a reactive key that includes the variables
  const key = computed(() => {
    const vars = toValue(variables);
    return JSON.stringify({
      query,
      variables: vars,
    });
  });

  const result = useFetch('https://graphql.datocms.com', {
    key,
    method: 'POST',
    headers: {
      Authorization: `Bearer ${runtimeConfig.public.datoCmsToken}`,
      ...(runtimeConfig.public.NUXT_ENV !== 'production' && {
        'X-Include-Drafts': true,
      }),
    },

    body: computed(() => {
      const vars = toValue(variables);
      return {
        query,
        variables: vars,
      };
    }),
    watch: [key], // Explicitly watch the key for changes
    transform: ({ data, errors }) => {
      if (errors) throw new errors();

      return data;
    },
  });

  return result;
};

I can see I’m supposed to add these 2 parameters to my request, but not sure where they go and it has not worked if I add them to the body. I don’t see them in the useQuery.ts composable that is part of the starter kit.

contentLink: 'v1',
baseEditingUrl: 'https://your-project.admin.datocms.com',

Any help to get me moving in the right direction would be much appreciated!

2

Hey @JLernDesign

We just shipped for it as well :slight_smile:

Thank you for letting us know!

1 Like
3

Thank you will give that a try and see what happens!

I am wondering about the query method I am using - I think I got it from an older composable DatoCMS was providing years ago. I am wondering is there an advantage to using the buildRequestInit() method from datocms/cda-client vs. just using useFetch and adding the X-Include-Drafts header?

4

In the starter kit, there’s actually a useQuery and similar that already use @datocms/cda-client under the hood: https://github.com/datocms/nuxt-starter-kit/blob/main/composables/useQuery.ts

If you just useFetch() (or make a normal HTTP fetch call) directly, you primarily lose out on:

  • Automatic retry on hitting rate limits
  • TypeScript support
  • Development-time parameter/header checking (e.g. you have to manually add X-Include-Drafts instead of just specifying includeDrafts: true)

The cda-client is just a lightweight helper around the normal fetch() anyway, just with the above conveniences

1 Like
5

@roger I am running my own query following the useQuery composable in my local files, but the data comes back undefined when I have the contentLink parameter in there, but if I remove it then the data fetches properly. Any idea what is going on there? Thanks for your help!

const initialData = await useFetch('https://graphql.datocms.com/', {
    ...buildRequestInit(query, {
      token: apiToken,
      includeDrafts: draftMode,
      excludeInvalid: true,
      variables: options?.variables,
      contentLink: draftMode ? 'v1' : undefined,
      baseEditingUrl: draftMode
        ? runtimeConfig.public.datocmsBaseEditingUrl
        : undefined,
    }),
    key: key,
    watch: [key],
    transform: ({ data, errors }) => {
      if (errors)
        throw new Error(
          `Something went wrong while executing the query: ${JSON.stringify(errors)}`
        );

      return data;
    },
  });

  return initialData;
6

Can you please send us that whole file or repo, or just the actual HTTP request body, so I can see all the params?

Like what is draftMode in your instance… is it already a boolean, or does it maybe need to be coerced into it from a string or number? (e.g. Boolean(draftMode) like https://github.com/datocms/nuxt-starter-kit/blob/main/composables/useQuery.ts#L60)

7

Sent you a message with the details. Thanks!

1 Like
8

Thanks! Will take a look :slight_smile: (Edit: Wrote you back; please check your DMs here)