How to set gatsby preview field in migration file?

[m.sikora]

Hello,

I get an error when I’m trying to set up an gatsby preview field by migration file. Unfortunately, I’m getting several errors, no matter what parameters I’m adding inside appearance object. Here’s sample code:

const gatsbypreview = await client.fields.create(itemTypeId, {
	label: 'Gatsby Preview',
	fieldType: 'json',
	apiKey: 'gatsbypreview',
	validators: {
		required: {},
	},
	appearance: {
		editor: 'json',
		parameters: {},
		addons: [
			{
				"id": "MY_PLUGIN_ID",
				"parameters": {

					"developmentMode": true,
				},
			},
		],
	},
});

I’m getting MY_PLUGIN_ID by sending request on https://site-api.datocms.com/plugins.

I tried to set in addons array attributes like:

• “type”: “plugin”,
• inside parameters object:
  • authToken
  • instanceUrl
  • developmentMode as above

, but I’m still getting 422 Error - “422 INVALID_FIELD (details: {“field”:“appearance.addons.0.id”,“code”:“VALIDATION_INVALID”,“message”:“incompatible with field type”})”

Do you have any idea which attributes are valid for this field type? It’s not mentioned in docs to be honest

[mat_jack1]

hello @m.sikora sorry for the delay here and welcome to Community!

The issue in your case is that the Gatsby plugin is an editor plugin, not an addon plugin.

So you should write this:

const gatsbypreview = await client.fields.create(itemTypeId, {
	label: 'Gatsby Preview',
	fieldType: 'json',
	apiKey: 'gatsbypreview',
	validators: {
		required: {},
	},
	appearance: {
		editor: 'MY_PLUGIN_ID',
		parameters: {},
		addons: [],
	},
});

Let me know if that helps!

[m.sikora]

Thanks for your reply. Unfortunately, it didn’t help. Still we have the same problem with invalid field:

ApiException: 422 INVALID_FIELD (details: {“field”:“appearance.editor”,“code”:“VALIDATION_INVALID”,“message”:“incompatible with field type”})

We need to use this field with modular content in one migration file as below:

 'use strict';
module.exports = async (client) => {
  const previewModel = await client.itemTypes.create({
    name: 'Gatsby preview',
    apiKey: 'gatsby_preview',
  });
  const bannerWithSlidesBlock = await client.itemTypes.create({
    name: 'block | banner with slide',
    apiKey: 'block_banner_with_slide',
    modularBlock: true,
  });
  const itemTypeId = 'gatsby_preview';
  const field = await client.fields.create(itemTypeId, {
    label: 'module | banner with slide',
    fieldType: 'rich_text',
    apiKey: 'module_banner_with_slide',
    validators: {
      richTextBlocks: {
        itemTypes: [bannerWithSlidesBlock.id],
      },
    },
  });
  const gatsbypreview = await client.fields.create(itemTypeId, {
    label: 'Gatsby Preview',
    fieldType: 'json',
    apiKey: 'gatsbypreview',
    validators: {
        required: {},
    },
    appearance: {
        editor: 'MY_PLUGIN_ID',
        parameters: {},
        addons: [],
    },
});
}

Could you please advise?

[mat_jack1]

I’ve tried your code and that works for me perfectly.

Could you please double check what is your plugin ID?

Are we talking about this plugin: https://www.datocms.com/marketplace/plugins/i/datocms-plugin-gatsby-cloud ?

[m.sikora]

Yes, we are talking about this plugin. We double checked ID - it is in 5-digit format like ‘12345’ - it is USER ID, not PLUGIN ID. We get it by sending request on https://site-api.datocms.com/plugins - is it a good way to an appropriate id?
We are running migration by using command:

dato migrate --token=“MY_DATOCMS_FULL_ACCESS_TOKEN” --destination=“test”

We are still getting the same error, please look at information below:

Failed request:
POST https://site-api.datocms.com/item-types/gatsby_preview/fields
content-type: application/json
accept: application/json
authorization: Bearer [FULL_ACCESS_TOKEN]
user-agent: js-client v3.2.0
X-Api-Version: 3
X-Environment: test
{“data”:{“type”:“field”,“attributes”:{“label”:“Gatsby Preview”,“field_type”:“json”,“api_key”:“gatsbypreview”,“validators”:{},“appearance”:{“addons”:,“editor”:“USER_ID”,“parameters”:{}},“default_value”:null}}}
HTTP Response:
422 Unprocessable Entity
{“data”:[{“id”:“f7f81e”,“type”:“api_error”,“attributes”:{“code”:“INVALID_FIELD”,“details”:{“field”:“appearance.editor”,“code”:“VALIDATION_INVALID”,“message”:“incompatible with field type”}}}]}
Exception details:
ApiException: 422 INVALID_FIELD (details: {“field”:“appearance.editor”,“code”:“VALIDATION_INVALID”,“message”:“incompatible with field type”})

[mat_jack1]

It should be this id field that you can find in the responses here: https://www.datocms.com/docs/content-management-api/resources/plugin/instances

Could you maybe share the actual ID so that I can double check?

Thanks!

[m.sikora]

Our ID is - 21548

And here’s response:

{ id: '21548',
  name: 'Gatsby Cloud',
  description:
   'Plugin that allows access to Gatsby Cloud Preview instances',
  packageName: 'datocms-plugin-gatsby-cloud',
  packageVersion: '0.1.7',
  pluginType: 'sidebar',
  fieldTypes: [ 'json' ],
  url:
   'https://unpkg.com/datocms-plugin-gatsby-cloud@0.1.7/dist/index.html',
  parameters:
   { authToken:
      'AUTH_TOKEN',
     instanceUrl: 'INSTANCE_URL',
     developmentMode: true },
  parameterDefinitions: { global: [ [Object], [Object], [Object] ], instance: [] } }

[mat_jack1]

oh wait @m.sikora are you sure that you are getting the plugin ID from the plugins in the right environment?

Maybe you are referring the plugin ID from the primary env, but each env has its own plugins, so you should fetch the ID for each environment, are you doing that already? From the code you’ve shared before, looks like the ID is hard coded?

[m.sikora]

You’re right, we were using id from primary environment. Now we create environment and get the id of plugin on this environment. Then we run migration with this id by command

dato migrate --token=“MY_DATOCMS_FULL_ACCESS_TOKEN” --source=“test” --inPlace

Now we get proper field in DatoCMS, but we also have an error:

ApiException: 422 MISSING_FIELDS (details: {“required_fields”:[“gatsbypreview”,“name”],“missing_fields”:[“gatsbypreview”]})

[mat_jack1]

Are you getting this new error when creating the record? If so, you should pass a value for the gatsbypreview field, even if it’s empty.

On the create you should always pass all the fields, even if they are null.

Let me know if that solves your problem

[m.sikora]

Yes, we get this error when creating the record. We tried pass value of gatsbypreview field as null (the same error as above) and as empty JSON:

ApiException: 422 INVALID_FIELD (details: {“field”:“gatsbypreview”,“field_id”:“1978951”,“field_label”:“Gatsby Preview”,“errors”:null,“code”:“INVALID_FORMAT”,“message”:“Value not acceptable for this field type”,“failing_value”:{}})

Could you please give us an example of properly set preview field? Here is our migration file:

module.exports = async client => {
	const articleModel = await client.itemTypes.create({
		name: 'Article',
		apiKey: 'article',
	});
	const titleField = await client.fields.create(articleModel.id, {
		label: 'Title',
		apiKey: 'title',
		fieldType: 'string',
		validators: {
			required: {},
		},
		appearance: {
			editor: 'single_line',
			parameters: {
				heading: true,
			},
			addons: [],
		},
	});

	const gatsbypre = await client.fields.create(articleModel.id, {
		label: 'Gatsby Preview',
		fieldType: 'json',
		apiKey: 'gatsbypreview',
		validators: {},
		appearance: {
			addons: [],
			editor: '23496',
			parameters: {},
		},
	});

	const article = await client.items.create({
		itemType: articleModel.id,
		title: 'My first article',
		gatsbypreview: null,
	});
};

[mat_jack1]

I’ve just tried this:

client.items.create({
	itemType: '236255',
	title: 'My first article',
	gatsbypreview: null,
});

and it worked for me. Maybe you have the gatsbypreview field marked as required?

Can you add records from the interface? Maybe that helps you?

Also remember that you can inspect all the calls that the browser does and replicate them yourself, maybe that helps you to troubleshoot your problem?