#Flutter + Hygraph

flutter create <PROJECT_NAME_HERE>

npx degit https://github.com/hygraph/flutter-hygraph-blog.git

flutter pub add graphql_flutter

// File location: lib/main.dart
import 'package:graphql_flutter/graphql_flutter.dart';

// File location: lib/main.dart
final HttpLink httpLink = HttpLink("https://<HYGRAPH_CDN_LOCATION>.cdn.hygraph.com/content/<ID>/master");

final ValueNotifier<GraphQLClient> client = ValueNotifier<GraphQLClient>(
  GraphQLClient(
    link: httpLink,
    cache: GraphQLCache(),
  ),
);

// File location: lib/main.dart
const String query = """
query Posts{
  posts{
    id
    publishedAt
    title
    excerpt
    coverImage {
      url
    }
    author {
      id
      name
    }
  }
}
""";

// File location: lib/main.dart
import 'widgets/blog_row.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
          title: 'GraphQL Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: const Text(
                "Hygraph blog app using Flutter",
              ),
            ),
            body: Query(
                options: QueryOptions(
                    document: gql(query),
                    variables: const <String, dynamic>{"code": "AF"}),
                builder: (result, {fetchMore, refetch}) {
                  if (result.isLoading) {
                    return const Center(
                      child: CircularProgressIndicator(),
                    );
                  }
                  if (result.data == null) {
                    return const Center(
                      child: Text("No article found!"),
                    );
                  }
                  final posts = result.data!['posts'];
                  return ListView.builder(
                    itemCount: posts.length,
                    itemBuilder: (context, index) {
                      final post = posts[index];
                      final title = post['title'];
                      final excerpt = post['excerpt'];
                      final coverImageURL = post!['coverImage']['url'];
                      final authorName = post['author']['name'];
                      return BlogRow(
                        title: title,
                        excerpt: excerpt,
                        coverURL: coverImageURL,
                        authorName: authorName,
                      ); // BlogRow widget
                    },
                  ); // ListView.builder
                }), // Query
          )), // MaterialApp
    ); // GraphQLProvider
  }
}

// File location: lib/main.dart
import 'widgets/blog_row.dart';
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() {
  runApp(const MyApp());
}

// Create GraphQL client and connect to Hygraph content API
final HttpLink httpLink = HttpLink(
    "https://<HYGRAPH_CDN_LOCATION>.cdn.hygraph.com/content/<ID>/master");

final ValueNotifier<GraphQLClient> client = ValueNotifier<GraphQLClient>(
  GraphQLClient(
    link: httpLink,
    cache: GraphQLCache(),
  ),
);

// GraphQL query to fetch all blog posts
const String query = """
query Posts{
  posts{
    id
    publishedAt
    title
    excerpt
    coverImage {
      url
    }
    author {
      id
      name
    }
  }
}
""";

// Main widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
          title: 'GraphQL Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: const Text(
                "Hygraph blog app using Flutter",
              ),
            ),
            body: Query(
                options: QueryOptions(
                    document: gql(query),
                    variables: const <String, dynamic>{"code": "AF"}),
                builder: (result, {fetchMore, refetch}) {
                  if (result.isLoading) {
                    return const Center(
                      child: CircularProgressIndicator(),
                    );
                  }
                  if (result.data == null) {
                    return const Center(
                      child: Text("No article found!"),
                    );
                  }
                  final posts = result.data!['posts'];
                  return ListView.builder(
                    itemCount: posts.length,
                    itemBuilder: (context, index) {
                      final post = posts[index];
                      final title = post['title'];
                      final excerpt = post['excerpt'];
                      final coverImageURL = post!['coverImage']['url'];
                      final authorName = post['author']['name'];
                      return BlogRow(
                        title: title,
                        excerpt: excerpt,
                        coverURL: coverImageURL,
                        authorName: authorName,
                      );
                    },
                  );
                }),
          )),
    );
  }
}

flutter run