Disable subscriptions

frontend/src/features/collections/components/collection-card/collection-card.tsx

@@ -14,7 +14,7 @@ import styles from './collection-card.module.scss';
 type Props = Pick<Collection, 'id' | 'name' | 'collectionBanner' | 'collectionLogo' | 'admin' | 'tokensLimit'> & {
   nfts: Pick<Nft, 'id' | 'mediaUrl'>[];
 } & {
-  nftsCount: string | undefined;
+  nftsCount: number | undefined;
 };
 
 const PREVIEW_NFTS_COUNT = 5;

frontend/src/features/collections/components/mint-limit-info-card/mint-limit-info-card.tsx

@@ -4,7 +4,7 @@ import LandscapeSVG from '../../assets/landscape.svg?react';
 
 type Props = Omit<InfoCardProps, 'heading' | 'text' | 'SVG'> & {
   heading: string | null | undefined;
-  text: string | number | undefined;
+  text: number | undefined;
 };
 
 function MintLimitInfoCard({ heading, text, ...props }: Props) {

frontend/src/pages/collection/consts.ts

@@ -14,7 +14,7 @@ const SOCIAL_ICON = {
 };
 
 const COLLECTION_SUBSCRIPTION = graphql(`
-  subscription CollectionSub($id: String!) {
+  query CollectionSub($id: String!) {
     collectionById(id: $id) {
       id
       name

frontend/src/pages/collection/hooks.ts

@@ -1,4 +1,4 @@
-import { useSubscription } from '@apollo/client';
+import { useQuery, useSubscription } from '@apollo/client';
 
 // TODO: reusing temporary solution for nfts subscriptiption
 import { useNFTs } from '../lists/hooks';
@@ -9,7 +9,7 @@ function useCollection(id: string, owner: string) {
   const [nfts, nftsCount, hasMoreNFTs, isNFTsQueryReady, fetchNFTs] = useNFTs(owner, id);
 
   // subscription to handle update in case of newly created collection
-  const { data, loading } = useSubscription(COLLECTION_SUBSCRIPTION, { variables: { id } });
+  const { data, loading } = useQuery(COLLECTION_SUBSCRIPTION, { variables: { id } });
   const collection = data?.collectionById;
   const isCollectionQueryReady = !loading && isNFTsQueryReady;
 

frontend/src/pages/lists/consts.ts

@@ -28,7 +28,7 @@ const COLLECTIONS_QUERY = graphql(`
 `);
 
 const COLLECTIONS_SUBSCRIPTION = graphql(`
-  subscription CollectionsSub($limit: Int!, $offset: Int!, $where: CollectionWhereInput!) {
+  query CollectionsSub($limit: Int!, $offset: Int!, $where: CollectionWhereInput!) {
     collections(limit: $limit, offset: $offset, orderBy: [createdAt_DESC, name_DESC, id_DESC], where: $where) {
       id
       name
@@ -97,7 +97,7 @@ const NFTS_QUERY = graphql(`
 `);
 
 const NFTS_SUBSCRIPTION = graphql(`
-  subscription NFTsSubscription($limit: Int!, $offset: Int!, $where: NftWhereInput!) {
+  query NFTsSubscription($limit: Int!, $offset: Int!, $where: NftWhereInput!) {
     nfts(limit: $limit, offset: $offset, orderBy: [createdAt_DESC, name_DESC, id_DESC], where: $where) {
       id
       idInCollection

frontend/src/pages/lists/hooks.ts

@@ -56,31 +56,31 @@ function useCollections(admin: string) {
   const isReady = !loading && isTotalCountReady;
   const hasMore = totalCount && collectionsCount ? collectionsCount < totalCount : false;
 
-  useEffect(() => {
-    if (loading) return;
+  // useEffect(() => {
+  //   if (loading) return;
 
-    const limit = collectionsCount || 1; // 1 fallback, cuz in case of empty list with limit 0, subscription won't work
-    const offset = 0;
+  //   const limit = collectionsCount || 1; // 1 fallback, cuz in case of empty list with limit 0, subscription won't work
+  //   const offset = 0;
 
-    // same solution as for nfts, but for newly created collections
-    const unsubscribe = subscribeToMore({
-      document: COLLECTIONS_SUBSCRIPTION,
-      variables: { limit, offset, where },
-      updateQuery: (prev = { collections: [] }, { subscriptionData }) => {
-        if (!subscriptionData.data) return { collections: [] };
+  //   // same solution as for nfts, but for newly created collections
+  //   const unsubscribe = subscribeToMore({
+  //     document: COLLECTIONS_SUBSCRIPTION,
+  //     variables: { limit, offset, where },
+  //     updateQuery: (prev = { collections: [] }, { subscriptionData }) => {
+  //       if (!subscriptionData.data) return { collections: [] };
 
-        const newCollections = subscriptionData.data.collections.filter(
-          (subCollection) => !prev.collections.some((collection) => collection.id === subCollection.id),
-        );
+  //       const newCollections = subscriptionData.data.collections.filter(
+  //         (subCollection) => !prev.collections.some((collection) => collection.id === subCollection.id),
+  //       );
 
-        return { collections: [...newCollections, ...prev.collections] };
-      },
-    });
+  //       return { collections: [...newCollections, ...prev.collections] };
+  //     },
+  //   });
 
-    return () => {
-      unsubscribe();
-    };
-  }, [subscribeToMore, collectionsCount, where, loading]);
+  //   return () => {
+  //     unsubscribe();
+  //   };
+  // }, [subscribeToMore, collectionsCount, where, loading]);
 
   const fetchCollections = useCallback(() => {
     const offset = collectionsCount;
@@ -114,35 +114,35 @@ function useNFTs(owner: string, collectionId?: string) {
   const hasMoreNFTs = totalCount && nftsCount ? nftsCount < totalCount : false;
   const isNFTsQueryReady = !loading && isTotalCountReady;
 
-  useEffect(() => {
-    if (loading) return;
-
-    const limit = nftsCount || 1; // 1 fallback, cuz in case of empty list with limit 0, subscription won't work
-    const offset = 0;
-
-    // kinda tricky subscription to handle live interaction,
-    // works for now, but worth to reconsider them later.
-    // maybe would be better to use connection's cursor pagination?
-    const unsubscribe = subscribeToMore({
-      document: NFTS_SUBSCRIPTION,
-      variables: { limit, offset, where },
-      updateQuery: (prev = { nfts: [] }, { subscriptionData }) => {
-        // extracting newly minted nfts, merge type policy should handle the rest
-        if (!subscriptionData.data) return { nfts: [] };
-
-        // important to preserve consistent sorting of nfts, otherwise results will be inaccurate
-        const mintedNfts = subscriptionData.data.nfts.filter(
-          (subNft) => !prev.nfts.some((nft) => nft.id === subNft.id),
-        );
-
-        return { nfts: [...mintedNfts, ...prev.nfts] };
-      },
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [subscribeToMore, nftsCount, where, loading]);
+  // useEffect(() => {
+  //   if (loading) return;
+
+  //   const limit = nftsCount || 1; // 1 fallback, cuz in case of empty list with limit 0, subscription won't work
+  //   const offset = 0;
+
+  //   // kinda tricky subscription to handle live interaction,
+  //   // works for now, but worth to reconsider them later.
+  //   // maybe would be better to use connection's cursor pagination?
+  //   const unsubscribe = subscribeToMore({
+  //     document: NFTS_SUBSCRIPTION,
+  //     variables: { limit, offset, where },
+  //     updateQuery: (prev = { nfts: [] }, { subscriptionData }) => {
+  //       // extracting newly minted nfts, merge type policy should handle the rest
+  //       if (!subscriptionData.data) return { nfts: [] };
+
+  //       // important to preserve consistent sorting of nfts, otherwise results will be inaccurate
+  //       const mintedNfts = subscriptionData.data.nfts.filter(
+  //         (subNft) => !prev.nfts.some((nft) => nft.id === subNft.id),
+  //       );
+
+  //       return { nfts: [...mintedNfts, ...prev.nfts] };
+  //     },
+  //   });
+
+  //   return () => {
+  //     unsubscribe();
+  //   };
+  // }, [subscribeToMore, nftsCount, where, loading]);
 
   const fetchNFTs = useCallback(() => {
     const offset = nftsCount;

frontend/src/pages/nft/consts.ts

@@ -1,7 +1,7 @@
 import { graphql } from '@/graphql';
 
 const NFT_QUERY = graphql(`
-  subscription NFTQuery($id: String!) {
+  query NFTQuery($id: String!) {
     nftById(id: $id) {
       id
       idInCollection

frontend/src/pages/nft/hooks.ts

@@ -1,10 +1,10 @@
-import { useSubscription } from '@apollo/client';
+import { useQuery, useSubscription } from '@apollo/client';
 
 import { NFT_QUERY } from './consts';
 
 function useNFT(collectionId: string, idInCollection: string) {
   const id = `${collectionId}-${idInCollection}`;
-  const { data } = useSubscription(NFT_QUERY, { variables: { id } });
+  const { data } = useQuery(NFT_QUERY, { variables: { id } });
 
   return data?.nftById;
 }