refactor: name of relay queries

Author: Roshanjossey

app/issues/Issues.tsx

@@ -12,15 +12,15 @@ import { SerializablePreloadedQuery } from 'src/relay/loadSerializableQuery'
 import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
 import Layout from 'src/components/Layout'
 import UserDetails from 'src/components/UserDetails/UserDetails'
-import issuesQueryNode, { issuesQuery } from '__generated__/issuesQuery.graphql'
+import IssuesQueryNode, { IssuesQuery } from '__generated__/IssuesQuery.graphql'
 import Card from 'src/components/Card'
 import IssuesFromLastRepo from 'src/components/issue/IssuesFromLastRepo'
 import IssuesFromRecentRepos from 'src/components/issue/IssuesFromRecentRepo'
 import RelevantIssues from 'src/components/issue/RelevantIssues'
 import { Suspense } from 'react'
 
 const IssuesQuery = graphql`
-  query issuesQuery {
+  query IssuesQuery {
     viewer {
       handle
       ...UserDetails_user
@@ -32,8 +32,8 @@ const IssuesQuery = graphql`
 `
 type IssuesProps = {
   preloadedQuery: SerializablePreloadedQuery<
-    typeof issuesQueryNode,
-    issuesQuery
+    typeof IssuesQueryNode,
+    IssuesQuery
   >
   cookies: string
 }
@@ -53,7 +53,7 @@ export default function IssuesContainer({
   )
 }
 
-export function Issues(props: { queryRef: PreloadedQuery<issuesQuery> }) {
+export function Issues(props: { queryRef: PreloadedQuery<IssuesQuery> }) {
   const data = usePreloadedQuery(IssuesQuery, props.queryRef)
   if (!data.viewer) {
     return <></>

app/issues/page.tsx

@@ -1,6 +1,6 @@
 import { headers } from 'next/headers'
 import loadSerializableQuery from 'src/relay/loadSerializableQuery'
-import issuesQueryNode, { issuesQuery } from '__generated__/issuesQuery.graphql'
+import IssuesQueryNode, { IssuesQuery } from '__generated__/IssuesQuery.graphql'
 import Issues from './Issues'
 
 export default async function IssuesPage({
@@ -10,10 +10,10 @@ export default async function IssuesPage({
 }) {
   const requestCookie = headers().get('cookie')
   const preloadedQuery = await loadSerializableQuery<
-    typeof issuesQueryNode,
-    issuesQuery
+    typeof IssuesQueryNode,
+    IssuesQuery
   >(
-    issuesQueryNode.params,
+    IssuesQueryNode.params,
     { id: (decodeURIComponent(params.id) as string) ?? '' },
     requestCookie ?? ''
   )

app/story/[id]/Story.tsx

@@ -14,17 +14,15 @@ import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQue
 import Comments from 'src/components/comment/Comments'
 import Layout from 'src/components/Layout'
 import UserDetails from 'src/components/UserDetails/UserDetails'
-import Id_StoryQueryNode, {
-  Id_StoryQuery,
-} from '__generated__/Id_StoryQuery.graphql'
+import StoryQueryNode, { StoryQuery } from '__generated__/StoryQuery.graphql'
 import { Suspense } from 'react'
 
 const Editor = dynamic(() => import('src/components/story/StoryEditor'), {
   ssr: false,
 })
 
 const StoryQuery = graphql`
-  query Id_StoryQuery($id: ID!) {
+  query StoryQuery($id: ID!) {
     node(id: $id) {
       ... on Story {
         id
@@ -38,10 +36,7 @@ const StoryQuery = graphql`
   }
 `
 type StoryProps = {
-  preloadedQuery: SerializablePreloadedQuery<
-    typeof Id_StoryQueryNode,
-    Id_StoryQuery
-  >
+  preloadedQuery: SerializablePreloadedQuery<typeof StoryQueryNode, StoryQuery>
   cookies: string
 }
 
@@ -60,7 +55,7 @@ export default function StoryContainer({
   )
 }
 
-const Story = (props: { queryRef: PreloadedQuery<Id_StoryQuery> }) => {
+const Story = (props: { queryRef: PreloadedQuery<StoryQuery> }) => {
   const data = usePreloadedQuery(StoryQuery, props.queryRef)
   return (
     <div>

app/story/[id]/page.tsx

@@ -1,8 +1,6 @@
 import { headers } from 'next/headers'
 import loadSerializableQuery from 'src/relay/loadSerializableQuery'
-import Id_StoryQueryNode, {
-  Id_StoryQuery,
-} from '__generated__/Id_StoryQuery.graphql'
+import StoryQueryNode, { StoryQuery } from '__generated__/StoryQuery.graphql'
 import Story from './Story'
 
 export default async function StoryPage({
@@ -12,10 +10,10 @@ export default async function StoryPage({
 }) {
   const requestCookie = headers().get('cookie')
   const preloadedQuery = await loadSerializableQuery<
-    typeof Id_StoryQueryNode,
-    Id_StoryQuery
+    typeof StoryQueryNode,
+    StoryQuery
   >(
-    Id_StoryQueryNode.params,
+    StoryQueryNode.params,
     { id: (decodeURIComponent(params.id) as string) ?? '' },
     requestCookie ?? ''
   )

app/user/[handle]/UserPage.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import {
+  Environment,
+  graphql,
+  PreloadedQuery,
+  RelayEnvironmentProvider,
+  usePreloadedQuery,
+} from 'react-relay'
+import { getCurrentEnvironment } from 'src/relay/environment'
+import { SerializablePreloadedQuery } from 'src/relay/loadSerializableQuery'
+import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
+import Layout from 'src/components/Layout'
+import UserDetails from 'src/components/UserDetails/UserDetails'
+import Card from 'src/components/Card'
+import MyStories from 'src/components/feed/MyStories'
+import UserPageQueryNode, {
+  UserPageQuery,
+} from '__generated__/UserPageQuery.graphql'
+import { Suspense } from 'react'
+
+const UserQuery = graphql`
+  query UserPageQuery($handle: String!) {
+    user(handle: $handle) {
+      handle
+      ...UserDetails_user
+      ...MyStories__Query
+    }
+  }
+`
+type StoryProps = {
+  preloadedQuery: SerializablePreloadedQuery<
+    typeof UserPageQueryNode,
+    UserPageQuery
+  >
+  cookies: string
+}
+
+export default function UserContainer({ preloadedQuery, cookies }: StoryProps) {
+  const environment = getCurrentEnvironment(cookies)
+  const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
+  return (
+    <RelayEnvironmentProvider environment={environment as Environment}>
+      <Suspense fallback="Loading...">
+        <User queryRef={queryRef} />
+      </Suspense>
+    </RelayEnvironmentProvider>
+  )
+}
+
+function User(props: { queryRef: PreloadedQuery<UserPageQuery> }) {
+  const data = usePreloadedQuery(UserQuery, props.queryRef)
+  if (!data.user) {
+    return <></>
+  }
+  return (
+    <div>
+      <Layout
+        sidebarContentRight={<></>}
+        sidebarContentLeft={
+          <Card>
+            <UserDetails user={data.user} />
+          </Card>
+        }
+      >
+        <MyStories user={data.user} />
+      </Layout>
+    </div>
+  )
+}

app/user/[handle]/page.tsx

@@ -1,62 +1,27 @@
-'use client'
-
 import { headers } from 'next/headers'
-import { useRouter } from 'next/router'
-import {
-  Environment,
-  graphql,
-  RelayEnvironmentProvider,
-  usePreloadedQuery,
-} from 'react-relay'
-import { getCurrentEnvironment } from 'src/relay/environment'
 import loadSerializableQuery from 'src/relay/loadSerializableQuery'
-import useSerializablePreloadedQuery from 'src/relay/useSerializablePreloadedQuery'
-import Layout from 'src/components/Layout'
-import UserDetails from 'src/components/UserDetails/UserDetails'
-import Handle_UserQueryNode, {
-  Handle_UserQuery,
-} from '__generated__/Handle_UserQuery.graphql'
-import Card from 'src/components/Card'
-import MyStories from 'src/components/feed/MyStories'
+import UserPageQueryNode, {
+  UserPageQuery,
+} from '__generated__/UserPageQuery.graphql'
+import User from './UserPage'
 
-const UserQuery = graphql`
-  query Handle_UserQuery($handle: String!) {
-    user(handle: $handle) {
-      handle
-      ...UserDetails_user
-      ...MyStories__Query
-    }
-  }
-`
-export default async function User() {
+export default async function StoryPage({
+  params,
+}: {
+  params: { handle: string }
+}) {
   const requestCookie = headers().get('cookie')
-  const environment = getCurrentEnvironment(requestCookie ?? '')
-  const router = useRouter()
-  const { handle } = router.query
   const preloadedQuery = await loadSerializableQuery<
-    typeof Handle_UserQueryNode,
-    Handle_UserQuery
+    typeof UserPageQueryNode,
+    UserPageQuery
   >(
-    Handle_UserQueryNode.params,
-    { handle: (handle as string) ?? '' },
+    UserPageQueryNode.params,
+    { handle: (decodeURIComponent(params.handle) as string) ?? '' },
     requestCookie ?? ''
   )
-  const queryRef = useSerializablePreloadedQuery(environment, preloadedQuery)
-  const data = usePreloadedQuery(UserQuery, queryRef)
   return (
-    <RelayEnvironmentProvider environment={environment as Environment}>
-      <div>
-        <Layout
-          sidebarContentRight={handle}
-          sidebarContentLeft={
-            <Card>
-              <UserDetails user={data.user} />
-            </Card>
-          }
-        >
-          <MyStories user={data.user} />
-        </Layout>
-      </div>
-    </RelayEnvironmentProvider>
+    <div>
+      <User preloadedQuery={preloadedQuery} cookies={requestCookie ?? ''} />
+    </div>
   )
 }