Headless CMS for Dart

Hygraph is the ideal Headless CMS for Dart websites and applications. Read further to learn how our API-first CMS allows you to add components to your Dart apps in minutes and enables your app's content to be managed from a powerful CMS.

Step #1 - Construct your query and fetch the data from Hygraph

Fetching data from a GraphQL API in Dart can be done using the http package, which allows you to make HTTP requests. However, first you will need to add the http package to your pubspec.yaml file.

The fetchGraphQLData function performs an HTTP POST request with the GraphQL query as the body. The response is then decoded from JSON, and you can handle the GraphQL data as needed.

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> fetchProducts() async {
  final String apiUrl = 'https://api-<region>.hygraph.com/v2/<some hash>/master';
  final String query = '''
  query GetProducts {
    products {
      name
      description
      slug
      availability
      image {
        url
      }
    }
  }
  ''';

  final response = await http.post(
    Uri.parse(apiUrl),
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_HYGRAPH_TOKEN', 
    },
    body: json.encode({'query': query}),
  );

  if (response.statusCode == 200) {
    final Map<String, dynamic> data = json.decode(response.body);
    // Handle the retrieved data
    print(data);
  } else {
    // Handle the error
    print('Request failed with status: ${response.statusCode}.');
  }
}

void main() {
  fetchProducts();
}

Working with mutations in Dart

Running a GraphQL mutation with Dart is similar to running a query. You will need to define the mutation, include any required variables, and then send a POST request with the mutation to the GraphQL endpoint.

Mutations in a Dart application, particularly when using a GraphQL API, allow the application to perform actions that cause changes to the data on the server. This can include creating, updating, or deleting records. This means you can not only query the data from your headless CMS but also create and edit it programmatically.

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> addProduct(String name, String description, bool availability, String imageURL) async {
  final String apiUrl = 'https://management.hygraph.com/graphql';
  final String mutation = '''
  mutation AddProduct(\$name: String!, \$description: String!, \$availability: Boolean!, \$imageURL: String!) {
    addProduct(input: {
      name: \$name,
      description: \$description,
      availability: \$availability,
      imageURL: \$imageURL
    }) {
      name
      description
      slug
      availability
      imageURL
    }
  }
  ''';

  final Map<String, dynamic> variables = {
    'name': name,
    'description': description,
    'availability': availability,
    'imageURL': imageURL,
  };

  final response = await http.post(
    Uri.parse(apiUrl),
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_HYGRAPH_TOKEN', 
    },
    body: json.encode({
      'query': mutation,
      'variables': variables,
    }),
  );

  if (response.statusCode == 200) {
    final Map<String, dynamic> data = json.decode(response.body);
    // Handle the successful mutation response
    print('Product added: ${data['data']['addProduct']}');
  } else {
    // Handle the error
    print('Request failed with status: ${response.statusCode}.');
  }
}

void main() {
  addProduct('Sample Product', 'This is a sample product description.', true, 'http://example.com/image.png');
}

Start building with Dart

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Dart project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Dart website or app.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Dart project

Incorporating a GraphQL-native headless CMS into a Dart application can significantly streamline the development process. For developers, it provides a seamless way to fetch exactly the data they need, thanks to GraphQL's powerful querying language. This aligns perfectly with Dart's focus on crafting high-performance user interfaces for both web and mobile platforms.

On the content management side, editors are empowered with a user-friendly interface to update content without any technical hurdles, facilitating a dynamic content flow. This synergy enhances the overall efficiency and agility of managing and deploying digital content across diverse Dart applications.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started