[React+django] add "quickSearch" & "booksByGenre" to the list of PostgREST calls replaced with GraphQL ones

Also circumvent the bug we face with Graphene Python Enums
(@link graphql-python/graphql-core#140)

Author: olivierphi

client/src/hoc/Book/BookFullContainer.tsx

@@ -15,7 +15,7 @@ interface BookFullContainerProps {
   hocToolkit: HigherOrderComponentToolkit;
 }
 
-interface BookFullContainerState {
+interface BookFullContainerReadyState {
   loading: false;
   bookFull: BookFull;
 }
@@ -24,23 +24,32 @@ interface BookFullContainerLoadingState {
   loading: true;
 }
 
+type BookFullContainerPossibleState = BookFullContainerReadyState | BookFullContainerLoadingState;
+
 export class BookFullContainer extends React.Component<
   BookFullContainerProps,
-  BookFullContainerState | BookFullContainerLoadingState
+  BookFullContainerPossibleState
 > {
+  public mounted: boolean = false;
+
   constructor(props: BookFullContainerProps) {
     super(props);
     this.state = this.getDerivedStateFromPropsAndAppState();
     this.onBookDataFetched = this.onBookDataFetched.bind(this);
   }
 
   public render() {
-    if (this.state.loading) {
+    const loading: boolean = this.state.loading || this.props.bookId !== this.state.bookFull.id;
+    if (loading) {
+      // We either don't have any book in our state yet,
+      // or that's not the one we want to render (likely because the user navigated to another book).
+      // --> let's fetch the wanted book data!
       this.fetchData();
       return <div className="loading">Loading full book...</div>;
     }
 
-    const bookFull: BookFull = this.state.bookFull;
+    const state = this.state as BookFullContainerReadyState;
+    const bookFull: BookFull = state.bookFull;
     const appState = this.props.hocToolkit.appStateStore.getState();
 
     const genresWithStats = this.getSortedGenresWithStats(
@@ -61,12 +70,25 @@ export class BookFullContainer extends React.Component<
     );
   }
 
+  public componentWillMount() {
+    this.mounted = true;
+  }
+
+  public componentWillUnmount() {
+    this.mounted = false;
+  }
+
   private fetchData(): void {
     this.props.hocToolkit.messageBus.on(EVENTS.BOOK_DATA_FETCHED, this.onBookDataFetched);
     this.props.hocToolkit.actionsDispatcher.fetchBookWithGenreStats(this.props.bookId);
   }
 
   private onBookDataFetched(): void {
+    if (!this.mounted) {
+      this.props.hocToolkit.messageBus.off(EVENTS.BOOK_DATA_FETCHED, this.onBookDataFetched);
+      return;
+    }
+
     const newState = this.getDerivedStateFromPropsAndAppState();
     if (!newState.loading) {
       // We now have our full book data!
@@ -76,9 +98,7 @@ export class BookFullContainer extends React.Component<
     }
   }
 
-  private getDerivedStateFromPropsAndAppState():
-    | BookFullContainerState
-    | BookFullContainerLoadingState {
+  private getDerivedStateFromPropsAndAppState(): BookFullContainerPossibleState {
     const appState = this.props.hocToolkit.appStateStore.getState();
     const book = appState.booksById[this.props.bookId];
 

client/src/repositories/BooksGraphqlRepository.ts

@@ -20,6 +20,9 @@ const quickSearchResultsCache: { [cacheKey: string]: QuickSearchResult[] } = {};
 
 /**
  * This module gets a bit messy, we'll probably refactor it at some point :-)
+ *
+ * N.B.: I haven't used a specific GraphQL client library like Apollo, because I always send the same static queries and
+ * I don't need to add the size of such a client lib to my JS.
  */
 export class BooksGraphqlRepository implements BooksRepository {
   public async getFeaturedBooks(lang: Lang): Promise<BooksById> {
@@ -36,7 +39,7 @@ query {
     slug
     coverPath
     genres
-    
+
     author {
       authorId
       firstName
@@ -47,8 +50,8 @@ query {
       nbBooks
     }
   }
-  
-}      
+
+}
       `;
     const response = await this.requestGraphql(graphqlQuery, null);
     const featuredBooks: Book[] = response.data.data.featuredBooks.map(mapBookFromServer);
@@ -71,7 +74,7 @@ query bookById($bookId: BookId!) {
       genres
       epubSize
       mobiSize
-      
+
       author {
         authorId
         firstName
@@ -82,18 +85,18 @@ query bookById($bookId: BookId!) {
         nbBooks
       }
     }
-    
+
     genresStats {
       title
       nbBooks
-      
+
       nbBooksByLang {
         lang
         nbBooks
       }
     }
   }
-  
+
 }
 
 `;
@@ -112,11 +115,27 @@ query bookById($bookId: BookId!) {
       return Promise.resolve(cacheForThisPatternAndLang);
     }
 
-    const response = await axios.get("/rpc/quick_autocompletion", {
-      params: { pattern, lang },
-    });
+    const graphqlQuery = `
+query quickSearch($pattern: String!, $lang: String) {
+
+  quickSearch(search: $pattern, lang: $lang) {
+    type
+    bookId
+    bookLang
+    bookTitle
+    bookSlug
+    authorId
+    authorFirstName
+    authorLastName
+    authorSlug
+    authorNbBooks
+    highlight
+  }
 
-    const matchingBooks = response.data.map(mapQuickAutocompletionDataFromServer);
+}
+    `;
+    const response = await this.requestGraphql(graphqlQuery, { pattern, lang });
+    const matchingBooks = response.data.data.quickSearch.map(mapQuickSearchDataFromServer);
     quickSearchResultsCache[cacheKey] = matchingBooks;
 
     return Promise.resolve(matchingBooks);
@@ -127,19 +146,53 @@ query bookById($bookId: BookId!) {
     lang: Lang,
     pagination: PaginationRequestData
   ): Promise<PaginatedBooksList> {
-    const response = await axios.get("/rpc/get_books_by_genre", {
-      params: {
-        genre,
-        lang,
-        page: pagination.page,
-        nb_per_page: pagination.nbPerPage,
-      },
+    const graphqlQuery = `
+query booksByGenre($genre: String!, $lang: String, $page: Int, $nbPerPage: Int) {
+
+  booksByGenre(genre: $genre, lang: $lang, page: $page, nbPerPage: $nbPerPage) {
+
+    books {
+      bookId
+      lang
+      title
+      subtitle
+      slug
+      coverPath
+      genres
+
+      author {
+        authorId
+        firstName
+        lastName
+        birthYear
+        deathYear
+        slug
+        nbBooks
+      }
+    }
+
+    meta {
+      page
+      nbPerPage
+      nbResults
+      nbResultsForAllLangs
+    }
+
+  }
+
+}
+    `;
+    const response = await this.requestGraphql(graphqlQuery, {
+      genre,
+      lang,
+      page: pagination.page,
+      nbPerPage: pagination.nbPerPage,
     });
 
     const booksWithPagination: ServerResponse.BooksDataWithPagination<ServerResponse.BookData> =
-      response.data[0];
+      response.data.data.booksByGenre;
     const paginationData: PaginationResponseData = getPaginationResponseDataFromServerResponse(
-      booksWithPagination.pagination
+      booksWithPagination.meta
     );
     const booksForThisGenre = getBooksByIdFromBooksArray(
       (booksWithPagination.books || []).map(mapBookFromServer)
@@ -166,9 +219,9 @@ query bookById($bookId: BookId!) {
     });
 
     const booksWithPagination: ServerResponse.BooksDataWithPagination<ServerResponse.BookData> =
-      response.data[0];
+      response.data.data.booksByAuthor;
     const paginationData: PaginationResponseData = getPaginationResponseDataFromServerResponse(
-      booksWithPagination.pagination
+      booksWithPagination.meta
     );
     const booksForThisGenre = getBooksByIdFromBooksArray(
       (booksWithPagination.books || []).map(mapBookFromServer)
@@ -187,7 +240,7 @@ query bookIntro($bookId: BookId!) {
   book(bookId: $bookId) {
     intro
   }
-  
+
 }
 
 
@@ -256,51 +309,49 @@ function mapBookWithGenreStatsFromServer(
 }
 
 function mapGenreWithStatsFromServer(row: ServerResponse.GenreWithStats): GenreWithStats {
-  let nbBooksByLang: { [lang: string]: number } = {};
+  const nbBooksByLang: { [lang: string]: number } = {};
   for (const nbBooksForLang of row.nbBooksByLang) {
     nbBooksByLang[nbBooksForLang.lang] = nbBooksForLang.nbBooks;
   }
 
   return {
     title: row.title,
     nbBooks: row.nbBooks,
-    nbBooksByLang: nbBooksByLang,
+    nbBooksByLang,
   };
 }
 
-function mapQuickAutocompletionDataFromServer(
-  row: ServerResponse.QuickAutocompletionData
-): QuickSearchResult {
+function mapQuickSearchDataFromServer(row: ServerResponse.QuickSearchData): QuickSearchResult {
   const rowType = row.type;
   return {
     resultType: rowType,
     book:
       "book" === rowType
         ? {
-            id: row.book_id as string,
-            title: row.book_title as string,
-            lang: row.book_lang as string,
-            slug: row.book_slug as string,
+            id: row.bookId as string,
+            title: row.bookTitle as string,
+            lang: row.bookLang as string,
+            slug: row.bookSlug as string,
           }
         : null,
     author: {
-      id: row.author_id,
-      firstName: row.author_first_name,
-      lastName: row.author_last_name,
-      slug: row.author_slug,
-      nbBooks: row.author_nb_books,
+      id: row.authorId,
+      firstName: row.authorFirstName,
+      lastName: row.authorLastName,
+      slug: row.authorSlug,
+      nbBooks: row.authorNbBooks,
     },
     highlight: row.highlight,
   };
 }
 
 function getPaginationResponseDataFromServerResponse(
-  responsePagination: ServerResponse.PaginationResponseData
+  responsePagination: ServerResponse.PaginationMetaData
 ): PaginationResponseData {
   return {
     page: responsePagination.page,
-    nbPerPage: responsePagination.nb_per_page,
-    nbResultsTotal: responsePagination.nb_results_total,
-    nbResultsTotalForAllLangs: responsePagination.nb_results_total_for_all_langs,
+    nbPerPage: responsePagination.nbPerPage,
+    nbResultsTotal: responsePagination.nbResults,
+    nbResultsTotalForAllLangs: responsePagination.nbResultsForAllLangs,
   };
 }

client/src/repositories/graphql-server-responses.ts

@@ -30,17 +30,17 @@ export interface BookWithGenreStats {
   genresStats: GenreWithStats[];
 }
 
-export interface QuickAutocompletionData {
+export interface QuickSearchData {
   type: "book" | "author";
-  book_id: string | null;
-  book_title: string | null;
-  book_lang: string;
-  book_slug: string;
-  author_id: string;
-  author_first_name: string;
-  author_last_name: string;
-  author_slug: string;
-  author_nb_books: number;
+  bookId: string | null;
+  bookTitle: string | null;
+  bookLang: string;
+  bookSlug: string;
+  authorId: string;
+  authorFirstName: string;
+  authorLastName: string;
+  authorSlug: string;
+  authorNbBooks: number;
   highlight: number;
 }
 
@@ -57,12 +57,12 @@ export interface NbBooksByLang {
 
 export interface BooksDataWithPagination<T> {
   books: T[];
-  pagination: PaginationResponseData;
+  meta: PaginationMetaData;
 }
 
-export interface PaginationResponseData {
+export interface PaginationMetaData {
   page: number;
-  nb_per_page: number;
-  nb_results_total: number;
-  nb_results_total_for_all_langs: number;
+  nbPerPage: number;
+  nbResults: number;
+  nbResultsForAllLangs: number;
 }