graphql-java-react

Created proof of concept for Java GraphQL backend with React Typescript frontend.

Frontend Summary

---

Frontend React app is using generated Typescript client from graphql-codegen with config file codegen.yml:

graphql-codegen --config codegen.yml

Here's a screenshot of the React app running, after getting graphql response from java server endpoint:

Query used by generated client:

    query BooksList {
        bookList {
            id
            name
            pageCount
            author {
                firstName
                lastName
            }
        }
    }

Http Request using generated hook useBooksListQuery() in frontend/src/components/BookList/index.tsx

Backend Summary

---

Backend Java server is using SpringBoot 2.6.7, along with GraphQL Java plugins.

GraphQL Schema schema.graphqls

type Query {
    bookById(id: ID): Book
    bookList: [Book!]!
}

type Book {
    id: ID
    name: String
    pageCount: Int
    author: Author
}

type Author {
    id: ID
    firstName: String
    lastName: String
}

Backend application then uses GraphQL Providers and associated data fetchers to provide data to client

Provider wiring example

private RuntimeWiring buildWiring() {
    return RuntimeWiring.newRuntimeWiring()
            .type(newTypeWiring("Query")
                    .dataFetcher("bookById", graphQLDataFetchers.getBookByIdDataFetcher())
                    .dataFetcher("bookList", graphQLDataFetchers.getBookListDataFetcher()))
            .type(newTypeWiring("Book")
                    .dataFetcher("author", graphQLDataFetchers.getAuthorDataFetcher())
                    //.dataFetcher("pageCount", graphQLDataFetchers.getPageCountDataFetcher())
            )
            .build();
}

Fetcher example

public DataFetcher getBookByIdDataFetcher() {
    return dataFetchingEnvironment -> {
        String bookId = dataFetchingEnvironment.getArgument("id");
        return books
                .stream()
                .filter(book -> book.get("id").equals(bookId))
                .findFirst()
                .orElse(null);
    };
}