Skip to content

Overview

NetlifyConnector provides different methods to help you create a connector within your extension for use with Netlify Connect and Netlify Visual Editor.

Review TypeScript definitions in the SDK

When you install the Netlify SDK, you have access to the TypeScript definitions directly in the @netlify/sdk package. You can browse through the definition files individually or review the type definition inline depending on your code editor.

MethodDescription
assets()Define how to manage assets stored on your data source. For Visual Editor only.
documents()Define how to send document updates back to your data source. For Visual Editor only.
hasAccess()Check whether the current user has the necessary permissions to update content in the data source. For Visual Editor only.
model()Define your data model.
proxySchema()Define a dynamic connector that builds a GraphQL schema using @graphql-tools modules. For Connect only.
scheduledActions()Add support for scheduled publishing with your data source. For Visual Editor only.
sync()Define what happens on initial and subsequent data syncs.

Usage example

import { NetlifyExtension } from "@netlify/sdk";
// Create an extension
const extension = new NetlifyExtension();
// Create a connector
const connector = extension.addConnector({
typePrefix: "Example",
supports: {
connect: true, // set to false if it doesn’t support connect
visualEditor: true, // set to false if it doesn’t support visual editing
},
});
// Use the Connector API on the `connector` object
// to define a model with a single document model on it
connector.model(async ({ define }) => {
define.document({
name: "Post",
fields: {
title: {
type: "String",
required: true,
},
},
});
});
// Use the Connector API to configure how data should
// be handled on initial and subsequent syncs. In this example,
// we’re passing in sample data in line.
connector.sync(async ({ models, isInitialSync }) => {
switch (true) {
case isInitialSync: {
models.Post.insert([
{
id: "1",
title: "This is my example post",
},
]);
break;
}
case !isInitialSync: {
models.Post.insert([
{
id: "1",
title: "This is my example post",
},
]);
}
}
});
// export the valid extension object
export { extension };

Got it!

Your feedback helps us improve our docs.