wip

package.json

@@ -21,7 +21,7 @@
     "react-no-ssr": "^1.1.0",
     "react-relay": "^0.0.0-experimental-4c4107dd",
     "relay-compiler-language-typescript": "^14.0.0",
-    "relay-nextjs": "^0.1.2",
+    "relay-nextjs": "^0.3.0",
     "relay-runtime": "^11.0.2",
     "rooks": "^5.0.2-alpha.1",
     "styled-components": "^5.3.0",

src/config/relay/server/getRelayServerEnvironment.ts

@@ -31,6 +31,11 @@ export const fetchQuery = async (
         return fromCache;
     }
 
+    console.log(JSON.stringify({
+        query: operation.text,
+        variables,
+    }))
+
     const response = await fetch(APP_CONFIG.API_URL, {
         body: JSON.stringify({
             query: operation.text,

src/features/chapters/ChapterById.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react';
 import { graphql, useFragment } from 'react-relay/hooks';
 import Link from 'next/link';
-import { Slug_GitaChapterQueryResponse } from '@/__generated__/Slug_GitaChapterQuery.graphql';
 import {
   ChapterById_ChapterDataFragment,
   ChapterById_ChapterDataFragment$key,
 } from '@/__generated__/ChapterById_ChapterDataFragment.graphql';
-import { GitaChapter } from '@/types/api';
 
 type ChapterByIdProps = {
-  query: Slug_GitaChapterQueryResponse;
+  chapterById: ChapterById_ChapterDataFragment$key;
 };
 
-export function ChapterById({ query }: ChapterByIdProps) {
-  const data = useFragment<ChapterById_ChapterDataFragment$key>(
+export function ChapterById({ chapterById }: ChapterByIdProps) {
+  const data = useFragment(
     graphql`
       fragment ChapterById_ChapterDataFragment on GitaChapter {
         name
@@ -38,8 +36,9 @@ export function ChapterById({ query }: ChapterByIdProps) {
         }
       }
     `,
-    query.GitaChapter
+    chapterById
   );
+  console.log(data);
   if (!data || !data.verses) {
     return null;
   }
@@ -77,7 +76,7 @@ export function ChapterById({ query }: ChapterByIdProps) {
                   </h2>
                   <p className="text-gray-500">{verse.text}</p>
                   <p>
-                    <Link href={`/verse/${verse._id}/fakeslug`}>
+                    <Link href={`/verse/${verse.verse_order}`}>
                       <a className="text-indigo-500 inline-flex items-center mt-4">
                         View Verse
                       </a>

src/features/chapters/ChaptersList.tsx

@@ -43,9 +43,7 @@ export function ChaptersList({
                 </h2>
                 <p className="leading-relaxed text-base">{chapter.name} </p>
                 <p>
-                  <Link
-                    href={`/chapter/${chapter._id}/${chapter.slug?.current}`}
-                  >
+                  <Link href={`/chapter/${chapter.chapter_number}`}>
                     <a className="text-indigo-500 inline-flex items-center mt-4">
                       View Chapter
                     </a>

src/pages/chapter/[chapter_number].tsx

@@ -5,13 +5,13 @@ import { ChapterById } from '@/features/chapters/ChapterById';
 import { graphql, useFragment, usePreloadedQuery } from 'react-relay/hooks';
 import { getRelayClientEnvironment } from '@/config/relay/getRelayClientEnvironment';
 import { RelayProps, withRelay } from 'relay-nextjs';
-import { Chapter_Number_GitaChapterQuery } from '@/__generated__/Chapter_Number_GitaChapterQuery.graphql';
+import { ChapterNumber_GitaChapterQuery } from '@/__generated__/ChapterNumber_GitaChapterQuery.graphql';
 import { Layout } from '@/components/Layout';
 
 export interface IChapterPageProps {}
 
 const ChapterQuery = graphql`
-  query Chapter_Number_GitaChapterQuery($chapter_number: ID!) {
+  query ChapterNumber_GitaChapterQuery($chapter_number: Float!) {
     allGitaChapter(where: { chapter_number: { eq: $chapter_number } }) {
       _id
       ...ChapterById_ChapterDataFragment
@@ -21,21 +21,15 @@ const ChapterQuery = graphql`
 
 function HandleData({
   preloadedQuery,
-}: RelayProps<{}, Chapter_Number_GitaChapterQuery>) {
-  const query = usePreloadedQuery<Chapter_Number_GitaChapterQuery>(
-    ChapterQuery,
-    preloadedQuery
-  );
-  const router = useRouter();
-  const { id, slug } = router.query;
-  const stringId = Array.isArray(id) ? id[0] : id;
-  if (stringId) {
-    return <ChapterById query={query} />;
+}: RelayProps<{}, ChapterNumber_GitaChapterQuery>) {
+  const { allGitaChapter } = usePreloadedQuery(ChapterQuery, preloadedQuery);
+  if (allGitaChapter && allGitaChapter[0]) {
+    return <ChapterById chapterById={allGitaChapter[0]} />;
   }
   return null;
 }
 
-function ChapterPage(props: RelayProps<{}, Chapter_Number_GitaChapterQuery>) {
+function ChapterPage(props: RelayProps<{}, ChapterNumber_GitaChapterQuery>) {
   return (
     <Layout>
       <Suspenseful>
@@ -54,4 +48,11 @@ export default withRelay(ChapterPage, ChapterQuery, {
 
     return getRelayServerEnvironment();
   },
+  variablesFromContext: (context) => {
+    const { chapter_number } = context.query;
+
+    return {
+      chapter_number: typeof chapter_number === 'string' ? parseFloat(5) : 1,
+    };
+  },
 });