Welcome to GraphQL Code Generator!
    Answer few questions and we will setup everything for you.

? What type of application are you building? Application built with other framework or vanilla JS
? Where is your schema?: (path or url) http://localhost:4000
? Pick plugins: TypeScript (required by other typescript plugins)
? Where to write the output: lib/data/models/app_models.dart
? Do you want to generate an introspection file? No
? How to name the config file? codegen.ts
? What script in package.json should run the codegen? codegen
Fetching latest versions of selected plugins...

    Config file generated at codegen.ts

      $ npm install

    To install the plugins.

      $ npm run codegen

    To run GraphQL Code Generator.

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  overwrite: true,
  schema: "http://localhost:4000",
  generates: {
    "lib/data/models/app_models.dart": {
      plugins: ["flutter-freezed"],
    },
  },
};

export default config;

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

const String host = 'localhost';
final HttpLink httpLink = HttpLink('http://$host:4000');

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

import 'package:flutter/material.dart';
import 'package:graphql_codegen/data/models/app_models.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const String allUsers = r'''
      query Users($published: Boolean!) {
        users(published: $published) {
          id
          name
          email
          profile {
            id
            bio
            userId
          }
          posts {
            id
            title
            content
            authorId
            published
          }
        }
      }
      ''';

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Query(
          options: QueryOptions(
              document: gql(allUsers), variables: const {'published': false}),
          builder: (QueryResult result,
              {FetchMore? fetchMore, VoidCallback? refetch}) {
            if (result.hasException) {
              return Text('Error: ${result.exception.toString()}');
            }
            if (result.isLoading) {
              return const CircularProgressIndicator();
            }
            if (result.data == null || result.data!.isEmpty) {
              return const Text('No data');
            }
            final List<User> users = result.data!['users']
                .map<User>((user) => User.fromJson(user))
                .toList();

            return ListView.builder(
                itemCount: users.length,
                itemBuilder: (context, index) => ListTile(
                      leading: const Icon(Icons.email),
                      title: Text(users[index].name!),
                      subtitle: Text(users[index].email),
                    ));
          }),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:graphql_codegen/ui/components/client.dart';
import 'package:graphql_codegen/ui/views/home.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: CacheProvider(
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter - GraphQL with Codegen'),
        ),
      ),
    );
  }
}