Netlify Docs
Ask Netlify

Contact

Netlify Connect /Manage data layers /

Manage data sources in Netlify Connect

This product is available on Connect Enterprise plans.

Once you create and configure a data layer, you can review and modify the data layer on the settings page in the Netlify UI. This document outlines how to add, edit, and delete data sources for an existing data layer.

A data source is an external system or service that contains your data, such as a content management system (CMS). Netlify Connect includes built-in support for a number of popular data source types such as Contentful and Sanity, but you can also build support for your custom data source using the Netlify SDK.

Team Owners and Developers can add, edit, or delete data sources connected to a data layer.

When you modify data source connections, Netlify re-syncs all connected data sources and updates the data layer’s GraphQL schema to reflect the change.

New to Netlify Connect? Set up a data layer first

If you haven’t already created a data layer, navigate to the

Connect
page for your team and select Add new data layer. Follow the prompts to configure the data layer and to add data sources, custom webhooks, and connected sites. For more information, refer to our get started with Netlify Connect guide.

# Add new data sources

To add a new data source to your data layer, first navigate to the data source section for your data layer:

  1. Navigate to the
    Connect
    page for your team in the Netlify UI.
  2. Select the data layer from the Data layers list, and then select Data layer settings.
  3. On the data layer settings page, select Data sources.

Each supported data source type has different credentials, options, and setup instructions:

# Contentful

Already using the Contentful Integration on Netlify?

Netlify Connect is separate from the Contentful Integration, and we currently do not leverage that integration to sync data. To use your Contentful instance with Netlify Connect, you need to add it here as a data source.

# Prepare your Contentful instance

Take the following steps on your Contentful space before you add it to your data layer:

  1. In the Contentful web app, navigate to
    Settings API keys
    , and select Add API key to create an API key and generate access tokens for the space you want to sync. Netlify will need one of these tokens to access your data.
  2. In the Contentful web app, navigate to
    Settings CMA tokens
    , and select Create personal access token to generate a Content Management API access token. Copy this token and store it in a safe place. Netlify will need this token to automatically set up a webhook in your Contentful space that will notify Netlify Connect whenever data changes in your CMS.

You’ll need to enter these tokens when you set up your Contentful data source in the Netlify UI.

# Connect to a Contentful instance

Once you have prepared your Contentful instance, take the following steps in the Netlify UI to add it to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select Contentful as the Data source type.

  4. (Optional) Enter a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, ContentfulPost with the prefix Marketing becomes MarketingContentfulPost in the schema.

    Note that Type prefix becomes a required field when you connect more than one Contentful instance to the same data layer.

  5. Enter the Access token for your Contentful instance. To sync published content, enter the Content Delivery API access token. To sync preview content instead, enter the Content Preview API access token.

  6. Enter the Space ID for your Contentful instance.

  7. Enter the Content Management API access token for your Contentful instance. Netlify will use this token to automatically set up a webhook in your Contentful space that will notify Netlify Connect whenever data changes in your CMS.

  8. (Optional) Select the Host URL for your Contentful instance. The default is cdn.contentful.com. To use the Contentful Preview API, select preview.contentful.com.

  9. (Optional) Enter the Contentful Environment to sync data from. The default is master.

  10. (Optional) Enter a Page limit to specify the number of entries to fetch per page when syncing data from Contentful. The default is 1000.

  11. (Optional) Select Enable Contentful Tags if your Contentful instance uses the Contentful Tags feature. Note that if you enable this option, you cannot use the content type name tags at this time.

  12. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

# Contentstack

To use Contentstack with Netlify Connect, complete the following steps:

  1. Enable the Contentstack data integration.
  2. Prepare your Contentstack instance.
  3. Connect to your Contentstack instance by adding it to your data layer.
# Enable the Contentstack data integration

To begin, enable the Contentstack data integration. This will make it available to all data layers on your team.

  1. In the Netlify UI, navigate to the
    Integrations
    tab for your team.
  2. Search for Contentstack.
  3. Select Enable.
# Prepare your Contentstack instance

Take the following steps on your Contentstack instance before you add it to your data layer:

  1. In your Contentstack account, navigate to
    Settings API Tokens
    for your stack, and generate a delivery token for the environment you want to sync. You’ll need to enter this token when you set up your Contentstack data source in the Netlify UI, and Netlify will use this token to access your data.
  2. To enable automatic syncing to Netlify, add your data layer webhook to your Contentstack instance:

    1. In your Contentstack account, navigate to

      Settings Webhooks
      for your stack, and select New Webhook.

    2. Add the following webhook to the URL To Notify field. Make sure to replace the placeholder with your data layer ID.

      https://webhook.netlify-connect.com/hooks/data_layer/data_source/publish/YOUR-DATA-LAYER-ID

    3. Under When, add a Condition for each content type and event that you wish to sync. At minimum, you should configure the webhook to trigger when the Entry type is Created, Updated, and Deleted. For more information on how to configure webhook conditions, refer to the Contentstack docs.

    4. Select Save to finish.

# Connect to a Contentstack instance

Once you have enabled the data integration and prepared your Contentstack instance, take the following steps in the Netlify UI to add it to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select Contentstack as the Data source type.

  4. (Optional) Enter a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, ContentstackPost with the prefix Marketing becomes MarketingContentstackPost in the schema.

    Note that Type prefix becomes a required field when you connect more than one Contentstack instance to the same data layer.

  5. Enter the API key for your stack.

  6. Enter the read-only Delivery token for your stack environment.

  7. Enter the stack Environment to sync data from. For example, the production environment.

  8. (Optional) Enter the Region to sync data from. Valid options are na-aws, eu-aws, na-azure, and eu-azure. The default is na-aws.

  9. (Optional) Specify the Locales to sync entries from. For example, en-us, fr-ch.

  10. (Optional) When entries aren't available for the specified locale, you can sync them in the fallback language instead. Select Include Fallback Locale to enable this. The default is false.

  11. (Optional) Enter a Limit to specify the number of entries or assets to sync per page. The default is 50.

  12. (Optional) Enter the Content Types to sync from Contentstack. For example, author, book.

  13. (Optional) Enter the Content Types to exclude from Contentstack syncs.

  14. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

# Drupal

Netlify Connect supports Drupal versions 9 and 10.

To use Drupal with Netlify Connect, complete the following steps:

  1. Enable the Drupal data integration.
  2. Prepare your Drupal instance.
  3. Connect to your Drupal instance by adding it to your data layer.
# Enable the Drupal data integration

To begin, enable the Drupal data integration. This will make it available to all data layers on your team.

  1. In the Netlify UI, navigate to the
    Integrations
    tab for your team.
  2. Search for Drupal.
  3. Select Enable.
# Prepare your Drupal instance

Take the following steps on your Drupal instance before you add it to your data layer:

  1. Install Gatsby Integration module version 2. During the installation flow, follow the prompts to enable the JSON:API Extras module.

  2. In the JSON:API Extras module, enable Include count in collection queries. This setting helps improve performance during data syncs.

  3. Navigate to

    Manage Extend
    and enable:

    • Gatsby
    • Gatsby JSON:API Extras

  4. Install JSON:API Schema module.

  5. To enable automatic syncing to Netlify, add your data layer webhook to the Gatsby Integration module.

    1. Navigate to

      Manage Configuration Web Services Gatsby Integration Gatsby Settings
      .

    2. Add the following webhook to the Build Webhook URLs field. Make sure to replace the placeholder with your data layer ID.

      https://webhook.netlify-connect.com/hooks/data_layer/data_source/publish/YOUR-DATA-LAYER-ID

    3. Under Entity types to send to Gatsby Preview and Build Server, select the types you wish to sync. At minimum, you should select the Content type.

    4. Select Save configuration to finish.

  6. Navigate to

    Manage People Permissions
    to add the following permissions for data syncing:

    1. Add Sync Gatsby Fastbuild log entities permissions. If your Drupal instance does not use authentication, then select Anonymous user. Otherwise, select the appropriate Drupal role.
    2. Add View Gatsby log entity entities permissions. If your Drupal instance does not use authentication, then select Anonymous user. Otherwise, select the appropriate Drupal role.
# Connect to a Drupal instance

Once you have enabled the data integration and prepared your Drupal instance, take the following steps in the Netlify UI to add it to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select Drupal as the Data source type.

  4. (Optional) Add a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, DrupalPost with the prefix Marketing becomes MarketingDrupalPost in the schema.

    Note that Type prefix becomes a required field when you connect more than one Drupal instance to the same data layer.

  5. Enter the Drupal URL for your Drupal site, including the trailing slash.

  6. (Optional) If your Drupal instance has basic authentication enabled, enter the HTTP Basic Auth username and HTTP Basic Auth password.

  7. (Optional) Enter the Gatsby Image CDN placeholder style name. The default is placeholder.

  8. (Optional) Enter the JSON:API base to use as the relative path to the JSON:API root. The default is /jsonapi.

  9. (Optional) Enter the Headers used for Drupal API to apply specific headers for the API.

  10. (Optional) Enter a Timeout value. This is the time in milliseconds before requests to Drupal will time out. The default is 30000.

  11. (Optional) Enter the number of Concurrent API requests a user can make to the Drupal API. The default is 20.

  12. (Optional) Enter the Filters used for Drupal API to specify what content to sync. This will allow you to control the data you receive from Drupal. For example, {"recipe": "filter[tags.name][value]=British"}.

  13. (Optional) Enter the Default language of your Drupal site. This will determine what language content to sync from Drupal. The default is to sync the English language content.

  14. (Optional) Enter the Enabled languages for your Drupal site. This will allow you to sync different translations from Drupal, depending on what languages your site has enabled.

  15. (Optional) Select Filter by language to filter the data you sync from Drupal based on the current language.

  16. (Optional) Enter the Translatable entities to specify what entities to sync translations for. For example, node--page, node--article.

  17. (Optional) Enter the Non-translatable entities from your Drupal site. These entities will use the default language of your site. For example, taxonomy_term--tags, taxonomy_term--categories.

  18. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

# Prismic

# Prepare your Prismic repository

Take the following steps in your Prismic repository before you add it to your data layer:

  1. Generate a Custom Types API token under

    Settings API & Security Custom Types API
    in your Prismic repository. Even if you don’t currently use custom types, Netlify requires this token for the syncing process.

  2. If you want to sync content from the Private API or to sync preview releases from the Public API for master, generate an access token under

    Settings API & Security Content API
    in your Prismic repository.

  3. To enable automatic syncing to Netlify, create a webhook in your Prismic repository under

    Settings Webhooks
    with the following URL. Make sure to replace the placeholder with your data layer ID.

    https://webhook.netlify-connect.com/hooks/data_layer/data_source/publish/YOUR-DATA-LAYER-ID
# Connect to a Prismic repository

Once you have prepared your Prismic repository, take the following steps in the Netlify UI to add it to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select Prismic as the Data source type.

  4. (Optional) Enter a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, PrismicPost with the prefix Marketing becomes MarketingPrismicPost in the schema.

    Note that Type prefix becomes a required field when you connect more than one Prismic instance to the same data layer.

  5. Enter the Repository name.

  6. Enter the Custom types API token. We’ll use this token to check for and sync custom type schemas from the Custom Types API.

  7. (Optional) Enter the Access token if you would like to sync content from the Private API or to sync preview releases from the Public API for master.

  8. (Optional) Enter the Content language to sync only content in a specific language. The default is to sync all languages.

  9. (Optional) Enter the Release ID if you wish to sync content from a specific release. The default is to sync the non-release build.

  10. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

Queries for Prismic slices must include __typename

To query Prismic slices, you need to explicitly include the __typename field in the query. For more information, refer to the Query Prismic slices section in our troubleshooting tips doc.

# Sanity

# Prepare your Sanity project

Take the following steps on your Sanity project before you add it to your data layer:

  1. Deploy a Sanity GraphQL API for the project. To deploy a GraphQL API on Sanity, use the Sanity CLI to run sanity graphql deploy in the Sanity Studio project folder. Learn more about deploying GraphQL APIs on Sanity.

    Note: You should redeploy the Sanity GraphQL API every time you make changes to the schema that you want to use in Netlify Connect

  2. To enable automatic syncing to Netlify Connect, add your data layer webhook to the Sanity project.

    1. Navigate to

      API Webhooks
      in your project settings. Under GROQ-powered Webhooks, select Create webhook.

    2. Enter a name for the webhook and then add the following webhook URL to the URL field. Make sure to replace the placeholder with your data layer ID.

      https://webhook.netlify-connect.com/hooks/data_layer/data_source/publish/YOUR-DATA-LAYER-ID

    3. Under Trigger on, select Create, Update, and Delete.

    4. Select Save to finish.

# Connect to a Sanity project

Once you have prepared your Sanity project, take the following steps in the Netlify UI to add it to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select Sanity as the Data source type.

  4. (Optional) Enter a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, SanityPost with the prefix Marketing becomes MarketingSanityPost in the schema.

    Note that Type prefix becomes a required field when you connect more than one Sanity project to the same data layer.

  5. Enter the Project ID for your Sanity project.

  6. Enter the name of the Dataset to sync.

  7. (Optional) If you deployed the Sanity GraphQL API with a tag, enter the GraphQL tag name. For example, if you used --tag experiment for the deploy, enter experiment. The default is default.

  8. (Optional) If your dataset is private, enter the API authentication token to use for syncing data. The token must have Viewer permissions.

  9. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

# Shopify

# Prepare to connect your Shopify store

To add a Shopify data source to Netlify Connect, first you need to set up a custom Shopify app that we can use to access Shopify’s Admin API and sync data. You will need the Admin API access token to set up your Shopify data source in Netlify Connect.

  1. Log in to your Shopify store as the store owner and search for Apps and sales channels.

  2. Enable custom app development. To do this, select Develop apps, then Allow custom app development. After reading the warning and information provided, select Allow custom app development.

  3. Create a custom app. From the App development section, select Create an app. Enter an app name and developer, then select Create app.

  4. Set admin API scopes for the app. On the custom app page, select Configure Admin API scopes. Enable the read_products, read_product_listings, and read_files scopes, and then select Save.

  5. Install the app and get the API access token. Select the API credentials tab and select Install app under Access tokens. Follow the prompts to install the app on your Shopify store.

    Next, under the Admin API access token section, select Reveal token once to access the token. Store the token in a safe place as you will need it to set up the data source connection.

# Connect to a Shopify store

Once you have created a custom Shopify app, take the following steps in the Netlify UI to add your Shopify store to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select Shopify as the Data source type.

  4. (Optional) Add a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, ShopifyProduct with the prefix Marketing becomes MarketingShopifyProduct in the schema.

    Note that Type prefix becomes a required field when you connect more than one Shopify store to the same data layer.

  5. Enter the Store URL for your Shopify store. This is the myshopify.com URL, excluding https:// and the trailing slash.

  6. Enter the Admin API access token. This is the access token for the custom Shopify app you created in the prepare to connect your store step. The token starts with shpat_.

  7. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

# Storyblok

# Prepare your Storyblok instance

Take the following steps on your Storyblok instance before you add it to your data layer:

  1. In your Storyblok space, navigate to
    Settings Access Tokens
    , and generate a preview access token. You’ll need to enter this token when you set up your Storyblok data source in the Netlify UI, and Netlify will use this token to access your data.
  2. To enable automatic syncing to Netlify, add your data layer webhook to your Storyblok instance:

    1. In your Storyblok space, navigate to

      Settings Webhooks
      , and select New Webhook.

    2. Add the following webhook to the Endpoint URL field. Make sure to replace the placeholder with your data layer ID.

      https://webhook.netlify-connect.com/hooks/data_layer/data_source/publish/YOUR-DATA-LAYER-ID

    3. Under Triggers, select the events that should trigger your webhook. At minimum, select the Story, Datasource, and Asset events.

    4. Select Save to finish.

# Connect to a Storyblok instance

Once you have prepared your Storyblok instance, take the following steps in the Netlify UI to add it to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select Storyblok as the Data source type.

  4. (Optional) Enter a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, StoryblokPost with the prefix Marketing becomes MarketingStoryblokPost in the schema.

    Note that Type prefix becomes a required field when you connect more than one Storyblok instance to the same data layer.

  5. Enter the Preview access token for your space.

  6. Enter the content Version to sync — either draft or published.

  7. (Optional) Select Include links to enable the ability to query links using allStoryblokLinkEntry.

  8. (Optional) Enter a Timeout value. This is the time in milliseconds before requests to Storyblok will time out. The default is 3000.

  9. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

# WordPress

# Prepare your WordPress instance

Take the following steps on your WordPress instance before you add it to your data layer:

  1. Install and activate the WPGraphQL WordPress plugin.

  2. Install and activate the WPGatsby WordPress plugin.

  3. Add the following webhook to your WPGatsby plugin settings to enable automatic syncing to Netlify Connect. Make sure to replace the placeholder with your data layer ID.

    https://webhook.netlify-connect.com/hooks/data_layer/data_source/publish/YOUR-DATA-LAYER-ID

# Connect to a WordPress instance

Once you have prepared your WordPress instance, take the following steps in the Netlify UI to add it to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Select WordPress as the Data source type.

  4. (Optional) Add a Type prefix for this data source. The prefix must start with an uppercase letter, and can only consist of alphanumeric characters and underscores.

    The prefix will be added to all data types synced from this data source in the GraphQL schema and you will use it when you query the GraphQL API. For example, WpPost with the prefix Marketing becomes MarketingWpPost in the schema.

    Note that Type prefix becomes a required field when you connect more than one WordPress instance to the same data layer.

  5. Enter the full WPGraphQL API URL for your WordPress instance. For example, https://your-wordpress.xyz/graphql.

  6. (Optional) Enter a Timeout value. This is the time in milliseconds before requests to WordPress will time out. The default is 3000.

  7. (Optional) Enter a Per page value to specify the number of nodes to fetch per page when syncing data from WordPress. The default is 100.

  8. (Optional) If your WordPress instance has basic authentication enabled, enter the HTTP Basic Auth username and HTTP Basic Auth password.

  9. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

# Other

To use a custom data source, an integration must already exist for it

If a data integration doesn’t already exist for your custom data source type, create one with the Netlify SDK. Data integrations use the Connectors component to specify the data model and logic for syncing data from a custom data source. Once you publish your data integration, you can start using it in Netlify Connect.

# Enable the data integration

Before you can connect to a custom data source, you must ensure that the data integration for that type of source is enabled on your team.

  1. In the Netlify UI, navigate to the
    Integrations
    tab for your team.
  2. Find the data integration for the custom data source type that you wish to use.
  3. If it’s not already enabled, select Enable.

If you can’t find the data integration, speak with the integration developer to ensure they have followed all the steps to publish a data integration.

# Prepare your data source instance

To enable automatic syncing to Netlify, you need to manually add a webhook to your custom data source instance. The exact instructions vary for each system but you need to do the following:

  1. Log in to your data source and navigate to the webhook settings.

  2. Follow the prompts to create a new webhook and add the following to the URL field. Make sure to replace the placeholder with your data layer ID.

    https://webhook.netlify-connect.com/hooks/data_layer/data_source/publish/YOUR-DATA-LAYER-ID

  3. If the options are available, select the data types and events that should trigger the webhook. We suggest including any create, edit, and delete events for all content types that you wish to store in your data layer.

  4. Save and enable the webhook.

# Connect to your custom data source

Once you have enabled the data integration for your team and prepared your data source instance, take the following steps in the Netlify UI to add the custom data source to your data layer:

  1. Select Add a data source.

  2. Enter a Name for this data source.

  3. Under Data source type, select the data integration that you enabled.

  4. Fill in the configuration fields with the values for your data source instance. For example, you may need to provide the API key for your CMS instance.

  5. Select Save to add this data source.

Netlify will connect to this data source and start syncing data to your data layer.

If the initial sync fails, review our troubleshooting tips for support.

# Edit data sources

  1. Navigate to the
    Connect
    page for your team in the Netlify UI.
  2. Select the data layer from the Data layers list, and then select Data layer settings.
  3. On the data layer settings page, select Data sources.
  4. Select the data source you want to edit.
  5. Select Edit and update the fields as needed.
  6. Select Save.

# Delete data sources

When you delete a data source, Netlify will delete all data related to that source from the data layer and then update the data layer’s schema to reflect the change.

To delete a data source from your data layer:

  1. Navigate to the
    Connect
    page for your team in the Netlify UI.
  2. Select the data layer from the Data layers list, and then select Data layer settings.
  3. On the data layer settings page, select Data sources.
  4. Select the data source you want to delete.
  5. Select Delete.
  6. A confirmation prompt will appear. Enter the name of the data source to confirm.
  7. Select Delete.

Once the sync events are complete, make sure you review the new schema and update any sites that make queries to the GraphQL API to reflect this change.

← Manage connected sites →