Allow fetching original content

This is useful when debugging

packages/api/package.json

@@ -53,6 +53,7 @@
     "firebase-admin": "^10.0.2",
     "googleapis": "^105.0.0",
     "graphql": "^15.3.0",
+    "graphql-fields": "^2.0.3",
     "graphql-middleware": "^6.0.10",
     "graphql-shield": "^7.5.0",
     "highlightjs": "^9.16.2",
@@ -95,6 +96,7 @@
     "@types/cookie-parser": "^1.4.2",
     "@types/dompurify": "^2.0.4",
     "@types/express": "^4.17.7",
+    "@types/graphql-fields": "^1.3.4",
     "@types/highlightjs": "^9.12.2",
     "@types/intercom-client": "^2.11.8",
     "@types/jsonwebtoken": "^8.5.0",

packages/api/src/elastic/pages.ts

@@ -274,7 +274,8 @@ export const deletePage = async (
 }
 
 export const getPageByParam = async <K extends keyof ParamSet>(
-  param: Record<K, Page[K]>
+  param: Record<K, Page[K]>,
+  includeOriginalHtml = false
 ): Promise<Page | undefined> => {
   try {
     const params = {
@@ -291,7 +292,7 @@ export const getPageByParam = async <K extends keyof ParamSet>(
       },
       size: 1,
       _source: {
-        excludes: ['originalHtml'],
+        excludes: includeOriginalHtml ? [] : ['originalHtml'],
       },
     }
 

packages/api/src/resolvers/article/index.ts

@@ -69,6 +69,7 @@ import { parseSearchQuery } from '../../utils/search'
 import { createPageSaveRequest } from '../../services/create_page_save_request'
 import { analytics } from '../../utils/analytics'
 import { env } from '../../env'
+import graphqlFields from 'graphql-fields'
 
 import {
   ArticleSavingRequestStatus,
@@ -397,12 +398,14 @@ export const getArticleResolver: ResolverFn<
   Record<string, unknown>,
   WithDataSourcesContext,
   QueryArticleArgs
-> = async (_obj, { slug }, { claims, pubsub }) => {
+> = async (_obj, { slug }, { claims, pubsub }, info) => {
   try {
     if (!claims?.uid) {
       return { errorCodes: [ArticleErrorCode.Unauthorized] }
     }
 
+    const includeOriginalHtml = !!(graphqlFields(info).article.originalHtml)
+
     analytics.track({
       userId: claims?.uid,
       event: 'link_fetched',
@@ -414,8 +417,8 @@ export const getArticleResolver: ResolverFn<
 
     // We allow the backend to use the ID instead of a slug to fetch the article
     const page =
-      (await getPageByParam({ userId: claims.uid, slug })) ||
-      (await getPageByParam({ userId: claims.uid, _id: slug }))
+      (await getPageByParam({ userId: claims.uid, slug }, includeOriginalHtml)) ||
+      (await getPageByParam({ userId: claims.uid, _id: slug }, includeOriginalHtml))
 
     if (!page) {
       return { errorCodes: [ArticleErrorCode.NotFound] }

packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx

@@ -0,0 +1,77 @@
+import { gql } from 'graphql-request'
+import useSWRImmutable, { Cache } from 'swr'
+import { makeGqlFetcher, RequestContext, ssrFetcher } from '../networkHelpers'
+import { ScopedMutator } from 'swr/dist/types'
+import { LibraryItems } from './useGetLibraryItemsQuery'
+
+type ArticleQueryInput = {
+  username?: string
+  slug?: string
+  includeFriendsHighlights?: boolean
+}
+
+type ArticleData = {
+  article: NestedArticleData
+}
+
+type NestedArticleData = {
+  article: ArticleAttributes
+  errorCodes?: string[]
+}
+
+export type ArticleAttributes = {
+  id: string
+  originalHtml: string
+}
+
+const query = gql`
+  query GetArticle(
+    $username: String!
+    $slug: String!
+  ) {
+    article(username: $username, slug: $slug) {
+      ... on ArticleSuccess {
+        article {
+          id
+          originalHtml
+        }
+      }
+      ... on ArticleError {
+        errorCodes
+      }
+    }
+  }
+`
+
+export function useGetArticleOriginalHtmlQuery({
+  username,
+  slug,
+}: ArticleQueryInput): string | undefined {
+  const variables = {
+    username,
+    slug,
+  }
+
+  const { data } = useSWRImmutable(
+    slug ? [query, username, slug] : null,
+    makeGqlFetcher(variables)
+  )
+
+  let resultData: ArticleData | undefined = data as ArticleData
+  console.log("RESULT", JSON.stringify(data))
+
+  return resultData?.article.article.originalHtml
+}
+
+export async function originalHtmlQuery(
+  context: RequestContext,
+  input: ArticleQueryInput
+): Promise<string | undefined> {
+  const resultData = (await ssrFetcher(context, query, input, false)) as ArticleData
+  console.log(JSON.stringify(resultData))
+  // if (resultData?.article.article.originalHtml) {
+  //   return resultData?.article.article.originalHtml
+  // }
+
+  return Promise.reject()
+}

packages/web/pages/[username]/[slug]/original.tsx

@@ -0,0 +1,62 @@
+import { PrimaryLayout } from '../../../components/templates/PrimaryLayout'
+import { LoadingView } from '../../../components/patterns/LoadingView'
+import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
+import { removeItemFromCache, useGetArticleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
+import { useRouter } from 'next/router'
+import { Box, VStack } from './../../../components/elements/LayoutPrimitives'
+import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
+import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
+import { articleKeyboardCommands, navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import dynamic from 'next/dynamic'
+import { webBaseURL } from '../../../lib/appConfig'
+import { Toaster } from 'react-hot-toast'
+import { createHighlightMutation } from '../../../lib/networking/mutations/createHighlightMutation'
+import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
+import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
+import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
+import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
+import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
+import Script from 'next/script'
+import { theme } from '../../../components/tokens/stitches.config'
+import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
+import { setLinkArchivedMutation } from '../../../lib/networking/mutations/setLinkArchivedMutation'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { useSWRConfig } from 'swr'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { SetLabelsModal } from '../../../components/templates/article/SetLabelsModal'
+import { DisplaySettingsModal } from '../../../components/templates/article/DisplaySettingsModal'
+import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
+import { SkeletonArticleContainer } from '../../../components/templates/article/SkeletonArticleContainer'
+import { useGetArticleOriginalHtmlQuery } from '../../../lib/networking/queries/useGetArticleOriginalHtmlQuery'
+
+
+const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
+  () => import('./../../../components/templates/article/PdfArticleContainer'),
+  { ssr: false }
+)
+
+export default function Home(): JSX.Element {
+  const router = useRouter()
+  const originalHtml = useGetArticleOriginalHtmlQuery({
+    username: router.query.username as string,
+    slug: router.query.slug as string,
+    includeFriendsHighlights: false,
+  })
+
+  if (!originalHtml) {
+    return <div>error</div>
+  }
+
+  return (
+    <Box
+        css={{
+          maxWidth: '100%',
+        }}
+        dangerouslySetInnerHTML={{
+          __html: originalHtml,
+        }}
+      />
+  )
+}