GraphQL Full-Stack Demo
This demo project demonstrates a full-stack application using GraphQL with a React frontend and a Java backend. The backend is built using Spring Boot, which exposes a GraphQL API, while the frontend is developed using React to consume the API.
Backend
The backend is built using Spring Boot, which provides a robust foundation for building web applications. It includes the necessary dependencies for GraphQL integration and data persistence.
The first step is defining the type schema for the GraphQL API. This schema defines the structure of the data and the available queries and mutations. The schema is defined in a .graphqls file, which is automatically picked up by Spring Boot.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25type Query {
users: [User!]!
user(id: ID!): User
posts: [Post!]!
}
type Mutation {
createUser(name: String!, email: String!): User!
createPost(title: String!, content: String, authorId: ID!): Post!
}
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String
authorId: ID!
author: User!
}
Then initializing the dataset by creating a DataInitializer class that seeds the database with initial data.
DataInitializer1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
public class DataInitializer {
CommandLineRunner seedData(
UserRepository userRepository,
PostRepository postRepository
) {
return args -> {
if (userRepository.count() > 0) {
return;
}
User alice = userRepository.save(
new User("Alice", "alice@example.com")
);
User bob = userRepository.save(
new User("Bob", "bob@example.com")
);
postRepository.save(
new Post(
"Learning GraphQL",
"My first GraphQL post.",
alice.getId()
)
);
postRepository.save(
new Post(
"GraphQL vs REST",
"GraphQL lets the client select fields.",
alice.getId()
)
);
postRepository.save(
new Post(
"PostgreSQL Basics",
"PostgreSQL stores the actual data.",
bob.getId()
)
);
};
}
}
The Second step is creating a UserGraphqlController class that defines the GraphQL queries and mutations for the User entity. This controller handles requests from the frontend and interacts with the database through the repositories.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39@Controller
public class UserGraphqlController {
private final UserRepository userRepository;
private final PostRepository postRepository;
public UserGraphqlController(
UserRepository userRepository,
PostRepository postRepository
) {
this.userRepository = userRepository;
this.postRepository = postRepository;
}
@QueryMapping
public List<User> users() {
return userRepository.findAll();
}
@QueryMapping
public User user(@Argument Long id) {
return userRepository.findById(id).orElse(null);
}
@MutationMapping
public User createUser(
@Argument String name,
@Argument String email
) {
return userRepository.save(new User(name, email));
}
// Resolver for User.posts.
// This method runs only when the client asks for the "posts" field.
@SchemaMapping(typeName = "User", field = "posts")
public List<Post> posts(User user) {
return postRepository.findByAuthorId(user.getId());
}
}
Frontend
The frontend is built using React, which provides a dynamic and responsive user interface. It uses Apollo Client to interact with the GraphQL API exposed by the backend. The frontend includes components for displaying users and their posts, as well as forms for creating new users and posts.
1 | import { useState } from "react"; |
