feat(new-article-path): Revise pathname of article detail page #4196

for #4196

src/pages/a/[shortHash].tsx

@@ -0,0 +1,3 @@
+import ArticleDetail from '~/views/ArticleDetail'
+
+export default ArticleDetail

src/views/ArticleDetail/gql.ts

@@ -17,6 +17,7 @@ const articlePublicFragment = gql`
     title
     slug
     mediaHash
+    shortHash
     state
     cover
     summary
@@ -87,8 +88,8 @@ const articlePublicFragment = gql`
 `
 
 export const ARTICLE_AVAILABLE_TRANSLATIONS = gql`
-  query ArticleAvailableTranslations($mediaHash: String!) {
-    article(input: { mediaHash: $mediaHash }) {
+  query ArticleAvailableTranslations($mediaHash: String, $shortHash: String) {
+    article(input: { mediaHash: $mediaHash, shortHash: $shortHash }) {
       id
       availableTranslations
     }
@@ -108,12 +109,13 @@ export const ARTICLE_AVAILABLE_TRANSLATIONS_BY_NODE_ID = gql`
 
 export const ARTICLE_DETAIL_PUBLIC = gql`
   query ArticleDetailPublic(
-    $mediaHash: String!
+    $mediaHash: String
+    $shortHash: String
     $language: UserLanguage!
     $includeTranslation: Boolean = false
     $includeCanSuperLike: Boolean = true
   ) {
-    article(input: { mediaHash: $mediaHash }) {
+    article(input: { mediaHash: $mediaHash, shortHash: $shortHash }) {
       ...ArticlePublicArticle
     }
   }
@@ -165,8 +167,8 @@ export const ARTICLE_DETAIL_PRIVATE = gql`
 `
 
 export const ARTICLE_TRANSLATION = gql`
-  query ArticleTranslation($mediaHash: String!, $language: UserLanguage!) {
-    article(input: { mediaHash: $mediaHash }) {
+  query ArticleTranslation($mediaHash: String, $shortHash: String, $language: UserLanguage!) {
+    article(input: { mediaHash: $mediaHash, shortHash: $shortHash }) {
       id
       translation(input: { language: $language }) {
         content

src/views/ArticleDetail/index.tsx

@@ -369,6 +369,7 @@ const ArticleDetail = ({
   const { getQuery, router, routerLang } = useRoute()
   const [needRefetchData, setNeedRefetchData] = useState(false)
   const mediaHash = getQuery('mediaHash')
+  const shortHash = getQuery('shortHash')
   const articleId =
     (router.query.mediaHash as string)?.match(/^(\d+)/)?.[1] || ''
   const viewer = useContext(ViewerContext)
@@ -377,11 +378,11 @@ const ArticleDetail = ({
    * fetch public data
    */
   const isQueryByHash = !!(
-    mediaHash &&
-    isMediaHashPossiblyValid(mediaHash) &&
-    !articleId
+    (mediaHash && isMediaHashPossiblyValid(mediaHash))
+    // && !articleId
   )
 
+  // - `/a/:shortHash`
   // backward compatible with:
   // - `/:username:/:articleId:-:slug:-:mediaHash`
   // - `/:username:/:articleId:`
@@ -391,6 +392,7 @@ const ArticleDetail = ({
     {
       variables: {
         mediaHash,
+        shortHash,
         language: routerLang || UserLanguage.ZhHant,
         includeTranslation,
       },
@@ -455,7 +457,7 @@ const ArticleDetail = ({
       await loadPrivate()
       setNeedRefetchData(false)
     })()
-  }, [mediaHash])
+  }, [mediaHash, shortHash])
 
   // fetch private data when mediaHash of public data is changed
   useEffect(() => {
@@ -621,18 +623,18 @@ const ArticleDetail = ({
 const ArticleDetailOuter = () => {
   const { getQuery, router, routerLang } = useRoute()
   const mediaHash = getQuery('mediaHash')
+  const shortHash = getQuery('shortHash')
   const articleId =
     (router.query.mediaHash as string)?.match(/^(\d+)/)?.[1] || ''
 
   const isQueryByHash = !!(
-    mediaHash &&
-    isMediaHashPossiblyValid(mediaHash) &&
-    !articleId
+    (mediaHash && isMediaHashPossiblyValid(mediaHash))
+    // && !articleId
   )
 
   const resultByHash = usePublicQuery<ArticleAvailableTranslationsQuery>(
     ARTICLE_AVAILABLE_TRANSLATIONS,
-    { variables: { mediaHash }, skip: !isQueryByHash }
+    { variables: { mediaHash, shortHash }, skip: !isQueryByHash }
   )
   const resultByNodeId = usePublicQuery<ArticleAvailableTranslationsQuery>(
     ARTICLE_AVAILABLE_TRANSLATIONS_BY_NODE_ID,