refactor: use generated document

.eslintrc

@@ -36,5 +36,5 @@
     "unicorn/no-useless-undefined": "error",
     "unicorn/prefer-array-find": "error"
   },
-  "ignorePatterns": ["/src/generated/types.ts"]
+  "ignorePatterns": ["/src/generated/types.ts", "/src/generated/documents.ts"]
 }

codegen.yml

@@ -1,4 +1,10 @@
 schema: https://api-mumbai.lens.dev
+documents:
+  [
+    './src/graphql/queries/*.graphql',
+    './src/graphql/mutations/*.graphql',
+    './src/graphql/fragments/*.graphql'
+  ]
 
 hooks:
   afterOneFileWrite:
@@ -10,3 +16,15 @@ generates:
     plugins:
       - typescript
       - fragment-matcher
+    config:
+      fetcher: fetch
+      dedupeFragments: true
+
+  src/generated/documents.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typed-document-node
+    config:
+      fetcher: fetch
+      dedupeFragments: true

package.json

@@ -55,7 +55,9 @@
   "devDependencies": {
     "@graphql-codegen/cli": "^2.13.1",
     "@graphql-codegen/fragment-matcher": "^3.3.1",
+    "@graphql-codegen/typed-document-node": "^2.3.3",
     "@graphql-codegen/typescript": "^2.7.3",
+    "@graphql-codegen/typescript-operations": "^2.5.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",

src/components/Comment/Feed.tsx

@@ -1,14 +1,14 @@
-import { gql, useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client';
 import QueuedPublication from '@components/Publication/QueuedPublication';
 import SinglePublication from '@components/Publication/SinglePublication';
 import PublicationsShimmer from '@components/Shared/Shimmer/PublicationsShimmer';
 import { Card } from '@components/UI/Card';
 import { EmptyState } from '@components/UI/EmptyState';
 import { ErrorMessage } from '@components/UI/ErrorMessage';
 import { Spinner } from '@components/UI/Spinner';
+import { CommentFeedDocument } from '@generated/documents';
 import { LensterPublication } from '@generated/lenstertypes';
 import { CustomFiltersTypes } from '@generated/types';
-import { CommentFields } from '@gql/CommentFields';
 import { CollectionIcon } from '@heroicons/react/outline';
 import { Mixpanel } from '@lib/mixpanel';
 import React, { FC } from 'react';
@@ -21,27 +21,6 @@ import { PAGINATION } from 'src/tracking';
 import CommentWarning from '../Shared/CommentWarning';
 import NewComment from './New';
 
-const COMMENT_FEED_QUERY = gql`
-  query CommentFeed(
-    $request: PublicationsQueryRequest!
-    $reactionRequest: ReactionFieldResolverRequest
-    $profileId: ProfileId
-  ) {
-    publications(request: $request) {
-      items {
-        ... on Comment {
-          ...CommentFields
-        }
-      }
-      pageInfo {
-        totalCount
-        next
-      }
-    }
-  }
-  ${CommentFields}
-`;
-
 interface Props {
   publication: LensterPublication;
 }
@@ -56,12 +35,12 @@ const Feed: FC<Props> = ({ publication }) => {
   const reactionRequest = currentProfile ? { profileId: currentProfile?.id } : null;
   const profileId = currentProfile?.id ?? null;
 
-  const { data, loading, error, fetchMore } = useQuery(COMMENT_FEED_QUERY, {
+  const { data, loading, error, fetchMore } = useQuery(CommentFeedDocument, {
     variables: { request, reactionRequest, profileId },
     skip: !publicationId
   });
 
-  const comments = data?.publications?.items;
+  const comments = data?.publications?.items ?? [];
   const pageInfo = data?.publications?.pageInfo;
 
   const { observe } = useInView({
@@ -105,7 +84,7 @@ const Feed: FC<Props> = ({ publication }) => {
                   </div>
                 )
             )}
-            {comments?.map((comment: LensterPublication, index: number) => (
+            {comments?.map((comment: any, index: number) => (
               <SinglePublication key={`${publicationId}_${index}`} publication={comment} showType={false} />
             ))}
           </Card>

src/components/Comment/New.tsx

@@ -9,6 +9,7 @@ import { ErrorMessage } from '@components/UI/ErrorMessage';
 import { MentionTextArea } from '@components/UI/MentionTextArea';
 import { Spinner } from '@components/UI/Spinner';
 import useBroadcast from '@components/utils/hooks/useBroadcast';
+import { CreateCommentTypedDataDocument, CreateCommentViaDispatcherDocument } from '@generated/documents';
 import { LensterAttachment, LensterPublication } from '@generated/lenstertypes';
 import {
   CreateCommentBroadcastItemResult,
@@ -17,10 +18,6 @@ import {
   ReferenceModules
 } from '@generated/types';
 import { IGif } from '@giphy/js-types';
-import {
-  CREATE_COMMENT_TYPED_DATA_MUTATION,
-  CREATE_COMMENT_VIA_DISPATHCER_MUTATION
-} from '@gql/TypedAndDispatcherData/CreateComment';
 import { ChatAlt2Icon } from '@heroicons/react/outline';
 import { defaultFeeData, defaultModuleData, getModule } from '@lib/getModule';
 import getSignature from '@lib/getSignature';
@@ -127,7 +124,7 @@ const NewComment: FC<Props> = ({ hideCard = false, publication }) => {
     }
   });
   const [createCommentTypedData, { loading: typedDataLoading }] = useMutation<Mutation>(
-    CREATE_COMMENT_TYPED_DATA_MUTATION,
+    CreateCommentTypedDataDocument,
     {
       onCompleted: async ({
         createCommentTypedData
@@ -183,11 +180,13 @@ const NewComment: FC<Props> = ({ hideCard = false, publication }) => {
   );
 
   const [createCommentViaDispatcher, { loading: dispatcherLoading }] = useMutation(
-    CREATE_COMMENT_VIA_DISPATHCER_MUTATION,
+    CreateCommentViaDispatcherDocument,
     {
       onCompleted: (data) => {
         onCompleted();
-        setTxnQueue([generateOptimisticComment(data?.createCommentViaDispatcher?.txHash), ...txnQueue]);
+        if (data.createCommentViaDispatcher.__typename === 'RelayerResult') {
+          setTxnQueue([generateOptimisticComment(data.createCommentViaDispatcher.txHash), ...txnQueue]);
+        }
       },
       onError
     }

src/components/Crowdfund/New.tsx

@@ -1,5 +1,5 @@
 import { LensHubProxy } from '@abis/LensHubProxy';
-import { gql, useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { GridItemEight, GridItemFour, GridLayout } from '@components/GridLayout';
 import ChooseFile from '@components/Shared/ChooseFile';
 import Pending from '@components/Shared/Pending';
@@ -13,11 +13,12 @@ import { Spinner } from '@components/UI/Spinner';
 import { TextArea } from '@components/UI/TextArea';
 import useBroadcast from '@components/utils/hooks/useBroadcast';
 import Seo from '@components/utils/Seo';
-import { CreatePostBroadcastItemResult, Erc20, Mutation, PublicationMainFocus } from '@generated/types';
 import {
-  CREATE_POST_TYPED_DATA_MUTATION,
-  CREATE_POST_VIA_DISPATHCER_MUTATION
-} from '@gql/TypedAndDispatcherData/CreatePost';
+  CreatePostTypedDataDocument,
+  CreatePostViaDispatcherDocument,
+  EnabledCurrencyModulesDocument
+} from '@generated/documents';
+import { CreatePostBroadcastItemResult, Erc20, Mutation, PublicationMainFocus } from '@generated/types';
 import { PlusIcon } from '@heroicons/react/outline';
 import getIPFSLink from '@lib/getIPFSLink';
 import getSignature from '@lib/getSignature';
@@ -46,17 +47,6 @@ import { v4 as uuid } from 'uuid';
 import { useContractWrite, useSignTypedData } from 'wagmi';
 import { object, string } from 'zod';
 
-const MODULES_CURRENCY_QUERY = gql`
-  query EnabledCurrencyModules {
-    enabledModuleCurrencies {
-      name
-      symbol
-      decimals
-      address
-    }
-  }
-`;
-
 const newCrowdfundSchema = object({
   title: string()
     .min(2, { message: 'Title should be atleast 2 characters' })
@@ -94,7 +84,7 @@ const NewCrowdfund: NextPage = () => {
   };
 
   const { isLoading: signLoading, signTypedDataAsync } = useSignTypedData({ onError });
-  const { data: currencyData, loading } = useQuery(MODULES_CURRENCY_QUERY);
+  const { data: currencyData, loading } = useQuery(EnabledCurrencyModulesDocument);
 
   const {
     data,
@@ -132,7 +122,7 @@ const NewCrowdfund: NextPage = () => {
 
   const { broadcast, data: broadcastData, loading: broadcastLoading } = useBroadcast({ onCompleted });
   const [createCrowdfundTypedData, { loading: typedDataLoading }] = useMutation<Mutation>(
-    CREATE_POST_TYPED_DATA_MUTATION,
+    CreatePostTypedDataDocument,
     {
       onCompleted: async ({
         createPostTypedData
@@ -182,7 +172,7 @@ const NewCrowdfund: NextPage = () => {
   );
 
   const [createCrowdfundViaDispatcher, { data: dispatcherData, loading: dispatcherLoading }] = useMutation(
-    CREATE_POST_VIA_DISPATHCER_MUTATION,
+    CreatePostViaDispatcherDocument,
     { onCompleted, onError }
   );
 
@@ -269,6 +259,11 @@ const NewCrowdfund: NextPage = () => {
 
   const isLoading =
     typedDataLoading || dispatcherLoading || isUploading || signLoading || writeLoading || broadcastLoading;
+  const txHash =
+    data?.hash ??
+    broadcastData?.broadcast?.txHash ??
+    (dispatcherData?.createPostViaDispatcher.__typename === 'RelayerResult' &&
+      dispatcherData?.createPostViaDispatcher.txHash);
 
   return (
     <GridLayout>
@@ -278,15 +273,9 @@ const NewCrowdfund: NextPage = () => {
       </GridItemFour>
       <GridItemEight>
         <Card>
-          {data?.hash ??
-          broadcastData?.broadcast?.txHash ??
-          dispatcherData?.createPostViaDispatcher?.txHash ? (
+          {txHash ? (
             <Pending
-              txHash={
-                data?.hash ??
-                broadcastData?.broadcast?.txHash ??
-                dispatcherData?.createPostViaDispatcher?.txHash
-              }
+              txHash={txHash}
               indexing="Crowdfund creation in progress, please wait!"
               indexed="Crowdfund created successfully"
               type="crowdfund"

src/components/Explore/Feed.tsx

@@ -1,15 +1,12 @@
-import { gql, useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client';
 import SinglePublication from '@components/Publication/SinglePublication';
 import PublicationsShimmer from '@components/Shared/Shimmer/PublicationsShimmer';
 import { Card } from '@components/UI/Card';
 import { EmptyState } from '@components/UI/EmptyState';
 import { ErrorMessage } from '@components/UI/ErrorMessage';
 import { Spinner } from '@components/UI/Spinner';
-import { LensterPublication } from '@generated/lenstertypes';
+import { ExploreFeedDocument } from '@generated/documents';
 import { CustomFiltersTypes, PublicationSortCriteria } from '@generated/types';
-import { CommentFields } from '@gql/CommentFields';
-import { MirrorFields } from '@gql/MirrorFields';
-import { PostFields } from '@gql/PostFields';
 import { CollectionIcon } from '@heroicons/react/outline';
 import { Mixpanel } from '@lib/mixpanel';
 import React, { FC } from 'react';
@@ -18,37 +15,8 @@ import { PAGINATION_ROOT_MARGIN } from 'src/constants';
 import { useAppStore } from 'src/store/app';
 import { PAGINATION } from 'src/tracking';
 
-export const EXPLORE_FEED_QUERY = gql`
-  query ExploreFeed(
-    $request: ExplorePublicationRequest!
-    $reactionRequest: ReactionFieldResolverRequest
-    $profileId: ProfileId
-  ) {
-    explorePublications(request: $request) {
-      items {
-        ... on Post {
-          ...PostFields
-        }
-        ... on Comment {
-          ...CommentFields
-        }
-        ... on Mirror {
-          ...MirrorFields
-        }
-      }
-      pageInfo {
-        totalCount
-        next
-      }
-    }
-  }
-  ${PostFields}
-  ${CommentFields}
-  ${MirrorFields}
-`;
-
 interface Props {
-  feedType?: string;
+  feedType?: PublicationSortCriteria;
 }
 
 const Feed: FC<Props> = ({ feedType = PublicationSortCriteria.CuratedProfiles }) => {
@@ -64,7 +32,7 @@ const Feed: FC<Props> = ({ feedType = PublicationSortCriteria.CuratedProfiles })
   const reactionRequest = currentProfile ? { profileId: currentProfile?.id } : null;
   const profileId = currentProfile?.id ?? null;
 
-  const { data, loading, error, fetchMore } = useQuery(EXPLORE_FEED_QUERY, {
+  const { data, loading, error, fetchMore } = useQuery(ExploreFeedDocument, {
     variables: { request, reactionRequest, profileId }
   });
 
@@ -98,7 +66,7 @@ const Feed: FC<Props> = ({ feedType = PublicationSortCriteria.CuratedProfiles })
       {!error && !loading && publications?.length !== 0 && (
         <>
           <Card className="divide-y-[1px] dark:divide-gray-700/80">
-            {publications?.map((post: LensterPublication, index: number) => (
+            {publications?.map((post: any, index: number) => (
               <SinglePublication key={`${post?.id}_${index}`} publication={post} />
             ))}
           </Card>

src/components/Explore/index.tsx

@@ -38,7 +38,7 @@ const Explore: NextPage = () => {
       />
       <GridItemEight className="space-y-5">
         <FeedType setFeedType={setFeedType} feedType={feedType} />
-        <Feed feedType={feedType} />
+        <Feed feedType={feedType as PublicationSortCriteria} />
       </GridItemEight>
       <GridItemFour>
         <Trending />