Getting started overview
Integrating DatoCMS into a project involves a series of steps that begin with account creation and conclude with a successful API call. This process typically includes setting up a new project space, defining content models, generating API tokens, and then executing a content delivery request. DatoCMS offers both a Content Delivery API for fetching published content and a Content Management API for programmatic content updates.
The core workflow focuses on obtaining an API token, which acts as a credential for accessing your content programmatically. Once you have a project space and content models configured, this token allows secure interaction with your content via either a GraphQL endpoint or a REST endpoint, based on your application's requirements. The Content Delivery API is read-only, ensuring that your content fetching operations do not inadvertently alter your data.
Quick Reference Steps
| Step | What to do | Where to find it |
|---|---|---|
| 1. Sign Up | Create a DatoCMS account (Developer Plan is free). | DatoCMS Pricing Page |
| 2. Create Project | Set up a new project space in the DatoCMS dashboard. | DatoCMS Dashboard after account login |
| 3. Define Model | Create a content model (e.g., 'Article', 'Product'). | DatoCMS Dashboard: 'Settings' > 'Content models' |
| 4. Add Content | Populate your content model with at least one record. | DatoCMS Dashboard: Navigate to your content model and 'Add new record' |
| 5. Get API Token | Generate a read-only Content Delivery API token. | DatoCMS Dashboard: 'Settings' > 'API tokens' > 'New API token' |
| 6. Make Request | Execute a GraphQL or REST request using your token. | Your application's code, or a tool like cURL/Postman leveraging DatoCMS Content Delivery API docs |
Create an account and get keys
Begin by creating an account on DatoCMS. The Developer Plan is available for free, offering core functionality for initial setup and testing. After registration, you will be directed to your project dashboard.
- Sign Up for a DatoCMS Account: Navigate to the DatoCMS homepage and follow the sign-up process. You can choose the free Developer Plan to get started.
- Create a New Project: Upon logging in, you'll be prompted to create a new project or select an existing one. For this guide, create a new project. A project acts as a container for your content, users, and settings.
- Define Your First Content Model: Before adding content, define a content model. A content model is a structured schema for your content. For example, create a model called "Post" with fields like "title" (Single-line string) and "content" (Rich text). To do this, go to 'Settings' > 'Content models' in your DatoCMS dashboard and click 'New model'. Add the necessary fields and save.
- Add Content to Your Model: With a content model defined, add an actual content entry. Navigate to the newly created content model (e.g., "Posts") from the main navigation and click 'Add new record'. Fill in the fields you defined (e.g., a title and some body text) and save/publish the record. This ensures there is data to retrieve with your API call.
- Generate an API Token: Accessing content requires an API token. In your DatoCMS project dashboard, navigate to 'Settings' > 'API tokens'. Click 'New API token'. We recommend creating a token specifically for the Content Delivery API (read-only) for your first request. Ensure the token has sufficient read permissions for the content you intend to fetch. Copy this token; it will be used in your API requests. The token will typically start with
dps_for Delivery API tokens.
Your first request
With an API token and some content in place, you can make your first request to the DatoCMS Content Delivery API. DatoCMS supports both GraphQL and REST for content retrieval. This guide will demonstrate both methods.
GraphQL Request Example
GraphQL is the recommended method for DatoCMS content delivery due to its flexibility in fetching specific data. Your GraphQL endpoint is typically https://graphql.datocms.com/, with the API token passed in the Authorization header.
To find your specific GraphQL endpoint, navigate to 'Settings' > 'API tokens' in your DatoCMS dashboard, and select your API token. The GraphQL API endpoint will be displayed there, usually in the format https://graphql.datocms.com/preview or similar, depending on whether it's a preview or published content endpoint.
Create a simple query to fetch your content. If you created a 'Post' model, your query might look like this:
query MyPosts {
allPosts {
id
title
content {
value
}
}
}
Using curl, execute the GraphQL query:
curl -X POST \
-H "Content-Type: application/json" \
-H "Accept: application/json" \
-H "Authorization: Bearer YOUR_API_TOKEN" \
-d '{ "query": "query MyPosts { allPosts { id title content { value } } }" }' \
"https://graphql.datocms.com/"
Replace YOUR_API_TOKEN with your actual Content Delivery API token. The response should be a JSON object containing the data for your 'Post' entries.
REST Request Example
The REST API provides a straightforward way to fetch content. The base URL for the REST Content Delivery API is https://cda.datocms.com/. You'll append the content model's pluralized API ID to this base URL.
To find your content model's API ID, go to 'Settings' > 'Content models' in your DatoCMS dashboard, select your model (e.g., 'Post'), and look for the 'API ID' field. For a 'Post' model, the pluralized API ID might be posts.
curl -X GET \
-H "Accept: application/json" \
-H "Authorization: Bearer YOUR_API_TOKEN" \
"https://cda.datocms.com/items?filter[type]=post"
This request fetches all items of type 'post'. Replace YOUR_API_TOKEN with your Content Delivery API token. The REST API offers various filtering and pagination options.
Common next steps
After successfully retrieving content, you can proceed with further integration and development:
- Integrate with a Frontend Framework: Utilize one of the DatoCMS SDKs (JavaScript, Ruby, PHP, Python) or a simple HTTP client to integrate the API calls into your chosen frontend framework (e.g., React, Next.js, Vue). DatoCMS provides Next.js integration guides and other framework-specific documentation.
- Advanced Content Modeling: Explore more complex content model structures, including relationships between models, modular content, and localized fields to support multi-language content.
- Content Management API: If your application requires programmatic content creation, updates, or deletion, explore the Content Management API. Note that this API requires a different type of API token with write permissions.
- Webhooks Configuration: Set up webhooks to trigger actions in your application whenever content changes in DatoCMS, such as rebuilding a static site or invalidating a cache. This is a common pattern for static site generators.
- Image Optimization and Assets: Leverage DatoCMS's integrated Image API to optimize and transform images on the fly, reducing page load times and improving user experience. This includes resizing, cropping, and format conversion.
- Environment Management: For larger projects, utilize DatoCMS's environment features to manage different versions of your content (e.g., development, staging, production) and collaborate on content changes without affecting live data.
Troubleshooting the first call
If your first API call doesn't return the expected data, consider these common troubleshooting steps:
- Check API Token: Ensure your API token is correct and has the necessary read permissions for the Content Delivery API. Double-check for typos or missing characters.
- Verify Content Model and API ID: Confirm that the content model's API ID used in your request (e.g.,
postsfor REST,allPostsfor GraphQL) matches exactly what is defined in your DatoCMS project. Ensure the case sensitivity is correct. - Content Status: Make sure the content you are trying to fetch is actually published. Unpublished content might not appear in the Content Delivery API response unless you are using a preview API token or specific preview endpoints.
- Endpoint URL: Verify that you are using the correct Content Delivery API endpoint for either GraphQL (
https://graphql.datocms.com/) or REST (https://cda.datocms.com/). - Headers: Ensure all required HTTP headers are present and correctly formatted, especially
Authorization: Bearer YOUR_API_TOKENandAccept: application/json. - Network Issues: Check your network connection and confirm that there are no firewalls or proxy settings blocking the outgoing API request.
- DatoCMS Docs and Community: Consult the DatoCMS documentation for specific error messages or refer to community forums for similar issues. The documentation provides detailed explanations of API responses and error codes.
- GraphQL Syntax: If using GraphQL, validate your query syntax. Tools like GraphiQL (a GraphQL IDE) can help in testing queries before integrating them into your application.