Proxy data through Cloud Functions (#108)

Author: samtstern

app/package-lock.json

@@ -17,6 +17,7 @@
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "core-js": "^3.6.5",
     "firebase": "^8.2.4",
+    "lodash.get": "^4.4.2",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-gtag": "^1.11.0",

app/package.json

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative lg:grid lg:grid-cols-12 gap-0">
+  <div class="relative fill-height lg:grid lg:grid-cols-12 gap-0">
     <!-- Side bar -->
     <div class="desktop-only lg:col-span-2 bg-gray-50 py-10 px-10">
       <slot name="sidebar"></slot>
@@ -28,4 +28,8 @@ import { Component, Vue } from "vue-property-decorator";
 export default class HeaderSidebarLayout extends Vue {}
 </script>
 
-<style scoped lang="postcss"></style>
+<style scoped lang="postcss">
+.fill-height {
+  min-height: 100vh;
+}
+</style>

app/src/components/HeaderSidebarLayout.vue

@@ -1,60 +1,61 @@
 import { BlogData, RepoData, RepoPage } from "../../../shared/types";
-import { firestore } from "./firebase";
 
-import firebase from "firebase";
+import {
+  FirestoreQuery,
+  QueryResult,
+  QueryResultDocument,
+} from "../../../shared/types/FirestoreQuery";
+
+// eslint-disable-next-line
+const lodashGet = require("lodash.get");
 
 export interface PagedResponse<T> {
-  q: firebase.firestore.Query<T>;
+  collectionPath: string;
+  q: FirestoreQuery;
   perPage: number;
   pages: T[][];
   currentPage: number;
   hasNext: boolean;
-  lastDoc: firebase.firestore.QueryDocumentSnapshot | null;
+  lastDoc: QueryResultDocument<T> | null;
 }
 
-export async function getDocs<T>(query: firebase.firestore.Query<T>) {
-  const snap = await query.get();
-
-  const snapshots = snap.docs;
-  const data = snap.docs.map((d) => d.data());
-  return { snapshots, data };
+function getApiHost(): string {
+  // In development the hosting emulator runs at port 5000
+  // while the Vue dev server runs elsewhere. In prod this is
+  // not an issue
+  return window.location.hostname === "localhost"
+    ? `http://localhost:5000`
+    : "";
 }
 
-export function reposRef(product: string) {
-  return firestore()
-    .collection("products")
-    .doc(product)
-    .collection("repos")
-    .withConverter({
-      toFirestore: (obj: RepoData) => obj,
-      fromFirestore: (snap) => snap.data() as RepoData,
-    });
-}
+async function fetchDoc(docPath: string) {
+  const params = new URLSearchParams({
+    path: docPath,
+  });
 
-export function reposQuery(product: string) {
-  return reposRef(product) as firebase.firestore.Query<RepoData>;
+  const res = await fetch(`${getApiHost()}/api/docProxy?${params.toString()}`);
+  return await res.json();
 }
 
-export function blogsRef(product: string) {
-  return firestore()
-    .collection("products")
-    .doc(product)
-    .collection("blogs")
-    .withConverter({
-      toFirestore: (obj: BlogData) => obj,
-      fromFirestore: (snap) => snap.data() as BlogData,
-    });
-}
+async function fetchQuery(collectionPath: string, q: FirestoreQuery) {
+  const params = new URLSearchParams({
+    path: collectionPath,
+    q: btoa(JSON.stringify(q)),
+  });
 
-export function blogsQuery(product: string) {
-  return blogsRef(product) as firebase.firestore.Query<BlogData>;
+  const res = await fetch(
+    `${getApiHost()}/api/queryProxy?${params.toString()}`
+  );
+  return await res.json();
 }
 
 export function emptyPageResponse<T>(
-  q: firebase.firestore.Query<T>,
+  collectionPath: string,
+  q: FirestoreQuery,
   perPage: number
 ): PagedResponse<T> {
   return {
+    collectionPath,
     q,
     perPage,
     pages: [],
@@ -69,38 +70,60 @@ export async function prevPage<T>(res: PagedResponse<T>) {
 }
 
 export async function nextPage<T>(res: PagedResponse<T>) {
-  // Fetch the next page based on the limit and startAfter
-  let q = res.q;
-  if (res.lastDoc) {
-    q = q.startAfter(res.lastDoc);
+  // TODO: Make a proper deep copy
+  const q: FirestoreQuery = JSON.parse(JSON.stringify(res.q));
+
+  // Add orderBy
+  q.orderBy = q.orderBy || [];
+
+  // Add the startAfter clauses
+  if (res.lastDoc != null) {
+    // Add one startAfter per orderBy
+    // eslint-disable-next-line
+    const startAfter: any[] = [];
+    for (const ob of q.orderBy) {
+      const fieldVal = lodashGet(res.lastDoc.data, ob.fieldPath);
+      startAfter.push(fieldVal);
+    }
+
+    // Add a secondary order on name
+    q.orderBy.push({
+      fieldPath: "__name__",
+      direction: "desc",
+    });
+    startAfter.push(res.lastDoc.id);
+
+    q.startAfter = startAfter;
   }
 
   // Load one more than the limit to see if we have anything more
   // beyond the minimum
-  q = q.limit(res.perPage + 1);
+  q.limit = res.perPage + 1;
 
-  const { data, snapshots } = await getDocs(q);
+  const json = await fetchQuery(res.collectionPath, q);
+  const { docs } = json as QueryResult<T>;
 
   // If we were able to find more than the per-page minimum, there
   // is still more after this
-  res.hasNext = data.length > res.perPage;
+  res.hasNext = docs.length > res.perPage;
 
   if (res.hasNext) {
     // If there are more pages after this then we need to
     // chop off the extra one we loaded (see above) and then add the data
-    const lastDoc = snapshots[snapshots.length - 2];
-    const pageData = data.slice(0, data.length - 1);
+    const lastDoc = docs[docs.length - 2];
+    const pageData = docs.slice(0, docs.length - 1).map((d) => d.data);
 
     res.lastDoc = lastDoc;
     res.pages.push(pageData);
   } else {
     // If this is the last page, just add the data (if it exists)
     // and accept the last snapshot
-    if (data.length > 0) {
-      res.pages.push(data);
+    if (docs.length > 0) {
+      const pageData = docs.map((d) => d.data);
+      res.pages.push(pageData);
     }
 
-    res.lastDoc = snapshots[snapshots.length - 1];
+    res.lastDoc = docs[docs.length - 1];
   }
 
   // Finally increment the page
@@ -111,19 +134,39 @@ export async function fetchRepo(
   product: string,
   id: string
 ): Promise<RepoData> {
-  const ref = reposRef(product).doc(id);
+  const repoPath = `/products/${product}/repos/${id}`;
+  const json = await fetchDoc(repoPath);
 
-  const snap = await ref.get();
-  return snap.data() as RepoData;
+  return json as RepoData;
 }
 
 export async function fetchRepoPage(
   product: string,
   id: string,
   pageKey: string
 ): Promise<RepoPage> {
-  const ref = reposRef(product).doc(id).collection("pages").doc(pageKey);
+  const pagePath = `/products/${product}/repos/${id}/pages/${pageKey}`;
+  const json = await fetchDoc(pagePath);
+
+  return json as RepoPage;
+}
+
+export async function queryBlogs(
+  product: string,
+  q: FirestoreQuery
+): Promise<QueryResult<BlogData>> {
+  const collectionPath = `/products/${product}/blogs`;
+  const json = await fetchQuery(collectionPath, q);
+
+  return json as QueryResult<BlogData>;
+}
+
+export async function queryRepos(
+  product: string,
+  q: FirestoreQuery
+): Promise<QueryResult<RepoData>> {
+  const collectionPath = `/products/${product}/repos`;
+  const json = await fetchQuery(collectionPath, q);
 
-  const snap = await ref.get();
-  return snap.data() as RepoPage;
+  return json as QueryResult<RepoData>;
 }

app/src/plugins/data.ts

@@ -1,8 +1,6 @@
 import firebase from "firebase/app";
-import "firebase/firestore";
-
-let _firestore: firebase.firestore.Firestore | null = null;
 
+// TODO: Do we need this at all anymore if we're not using Firestore on the frontend?
 export function app() {
   if (firebase.apps.length === 0) {
     if (process.env.VUE_APP_FIREBASE_PROJECT === "ugc-site-prod") {
@@ -30,14 +28,3 @@ export function app() {
 
   return firebase.app();
 }
-
-export function firestore() {
-  if (_firestore === null) {
-    _firestore = app().firestore();
-    if (process.env.NODE_ENV !== "production") {
-      _firestore.useEmulator("localhost", 8001);
-    }
-  }
-
-  return _firestore;
-}

app/src/plugins/firebase.ts

@@ -117,9 +117,10 @@ import ProductLogo from "@/components/ProductLogo.vue";
 import UIModule from "@/store/ui";
 
 import { ALL_PRODUCTS, ProductConfig } from "@/model/product";
-import { blogsRef, getDocs, reposRef } from "@/plugins/data";
+import { queryRepos, queryBlogs } from "@/plugins/data";
 
 import { BlogData, RepoData } from "../../../shared/types";
+import { FirestoreQuery } from "../../../shared/types/FirestoreQuery";
 
 @Component({
   components: {
@@ -135,6 +136,16 @@ export default class Home extends Vue {
   public recentBlogs: Record<string, BlogData[]> = {};
   public recentRepos: Record<string, RepoData[]> = {};
 
+  private RECENTLY_ADDED_QUERY: FirestoreQuery = {
+    orderBy: [
+      {
+        fieldPath: "stats.dateAdded",
+        direction: "desc",
+      },
+    ],
+    limit: 2,
+  };
+
   mounted() {
     const promises: Promise<unknown>[] = [];
 
@@ -150,15 +161,17 @@ export default class Home extends Vue {
   }
 
   public async fetchRecentRepos(product: string) {
-    const q = reposRef(product).orderBy("stats.dateAdded", "desc").limit(2);
-    const { data } = await getDocs(q);
-    Vue.set(this.recentRepos, product, data);
+    const res = await queryRepos(product, this.RECENTLY_ADDED_QUERY);
+    const docs = res.docs.map((d) => d.data);
+
+    Vue.set(this.recentRepos, product, docs);
   }
 
   public async fetchRecentBlogs(product: string) {
-    const q = blogsRef(product).orderBy("stats.dateAdded", "desc").limit(2);
-    const { data } = await getDocs(q);
-    Vue.set(this.recentBlogs, product, data);
+    const res = await queryBlogs(product, this.RECENTLY_ADDED_QUERY);
+    const docs = res.docs.map((d) => d.data);
+
+    Vue.set(this.recentBlogs, product, docs);
   }
 
   public scrollToProducts() {
@@ -181,7 +194,7 @@ export default class Home extends Vue {
       (arr) => arr.length > 0
     );
 
-    return hasRepos || hasBlogs;
+    return hasRepos && hasBlogs;
   }
 
   get products() {