Flutterexperts

GraphQL can fetch only the data that is needed, GraphQL has become extremely popular in modern app development. It can improve your app’s efficiency and performance when used in conjunction with Flutter, a leading cross-platform development framework.

This article will explore GraphQL With HTTP In Flutter. We will learn how to execute a demo program and how to implement graphql with HTTP using the HTTP package in your Flutter applications.

For Http:

http | Dart package
A composable, multi-platform, Future-based API for HTTP requests.pub.dev

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

---

Table Of Contents::

What is GraphQL?

Implementation

GraphQL Operations

GraphQL Query with HTTP

GraphQL Mutations

Error Handling

Conclusion

---

---

What is GraphQL?:

GraphQL is an open-source query language developed by Facebook. By allowing clients to request only the data they require, GraphQL provides a more dynamic and effective method of interacting with APIs than REST APIs. Applications become more effective as a result of this reduction in data over- or under-fetching.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  http: ^1.3.0

Step 2: Import

import 'package:http/http.dart';

Step 3: Run flutter packages get in the root directory of your app.

GraphQL Operations:

There are two main operations GraphQL works:

• Query: Retrieve data.
• Mutation: Change data.

Every operation is organized as a query that resembles JSON, but it defines the required data using a particular syntax.

GraphQL Query with HTTP:

Here’s how to put this into implementing Flutter:

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

Future<void> fetchUsers() async {
  const String graphqlEndpoint = 'https://www.example.com/graphql';
  const String query = '''
  query {
    users {
      id
      name
      email
    }
  }
  ''';

  final response = await http.post(
    Uri.parse(graphqlEndpoint),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({'query': query}),
  );

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print(data['data']['users']);
  } else {
    throw Exception('Failed to fetch users');
  }
}

GraphQL Mutations:

You can change the data on the server through mutations. To create a new user, for instance:

Future<void> createUser(String name, String email) async {
  const String graphqlEndpoint = 'https://example.com/graphql';
  const String mutation = '''
  mutation(\$name: String!, \$email: String!) {
    createUser(input: { name: \$name, email: \$email }) {
      id
      name
      email
    }
  }
  ''';

  final variables = {'name': name, 'email': email};

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

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print(data['data']['createUser']); // Access the created user data
  } else {
    throw Exception('Failed to create user');
  }
}

Error Handling:

An error field is frequently included in GraphQL response. To deal with mistakes:

final responseBody = jsonDecode(response.body);
if (responseBody['errors'] != null) {
print('GraphQL Error: ${responseBody['errors']}');
} else {
print('Data: ${responseBody['data']}');
}

Conclusion:

In the article, I have explained GraphQL With HTTP in a flutter; you can modify this code according to your choice. This was a small introduction to GraphQL With HTTP In Flutter On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the GraphQL With HTTP in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on GraphQL With HTTP using the HTTP package in your Flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---