fix: fixing a bug with graphql data shape

functions/graphql/nexus-typegen.ts

@@ -83,12 +83,9 @@ export interface NexusGenObjects {
     answers_count: number; // Int!
     author: NexusGenRootTypes['User']; // User!
     comments: NexusGenRootTypes['PostComment'][]; // [PostComment!]!
-    cover_image: string; // String!
     date: string; // String!
-    deadline: string; // String!
     excerpt: string; // String!
     id: number; // Int!
-    reward_amount: number; // Int!
     tags: NexusGenRootTypes['Tag'][]; // [Tag!]!
     title: string; // String!
     votes_count: number; // Int!
@@ -213,12 +210,9 @@ export interface NexusGenFieldTypes {
     answers_count: number; // Int!
     author: NexusGenRootTypes['User']; // User!
     comments: NexusGenRootTypes['PostComment'][]; // [PostComment!]!
-    cover_image: string; // String!
     date: string; // String!
-    deadline: string; // String!
     excerpt: string; // String!
     id: number; // Int!
-    reward_amount: number; // Int!
     tags: NexusGenRootTypes['Tag'][]; // [Tag!]!
     title: string; // String!
     type: string; // String!
@@ -344,12 +338,9 @@ export interface NexusGenFieldTypeNames {
     answers_count: 'Int'
     author: 'User'
     comments: 'PostComment'
-    cover_image: 'String'
     date: 'String'
-    deadline: 'String'
     excerpt: 'String'
     id: 'Int'
-    reward_amount: 'Int'
     tags: 'Tag'
     title: 'String'
     type: 'String'

functions/graphql/schema.graphql

@@ -86,7 +86,7 @@ type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
   getCategory(id: Int!): Category!
-  getFeed(skip: Int = 0, take: Int = 15): [Post!]!
+  getFeed(skip: Int = 0, take: Int = 5): [Post!]!
   getLnurlDetailsForProject(project_id: Int!): LnurlDetails!
   getPostById(id: Int!): Post!
   getProject(id: Int!): Project!
@@ -100,12 +100,9 @@ type Question implements PostBase {
   answers_count: Int!
   author: User!
   comments: [PostComment!]!
-  cover_image: String!
   date: String!
-  deadline: String!
   excerpt: String!
   id: Int!
-  reward_amount: Int!
   tags: [Tag!]!
   title: String!
   type: String!

functions/graphql/types/post.js

@@ -66,9 +66,6 @@ const Question = objectType({
             resolve: () => 'Question',
 
         });
-        t.nonNull.string('cover_image');
-        t.nonNull.string('deadline');
-        t.nonNull.int('reward_amount');
         t.nonNull.int('answers_count');
         t.nonNull.list.nonNull.field('comments', {
             type: "PostComment"
@@ -96,7 +93,193 @@ const Post = unionType({
     resolveType: (item) => item.type,
 })
 
+let coverImgsCntr = -1;
+function getCoverImage() {
+    const coverImgs = [
+        'https://picsum.photos/id/10/1660/1200',
+        'https://picsum.photos/id/1000/1660/1200',
+        'https://picsum.photos/id/1002/1660/1200',
+        'https://picsum.photos/id/1008/1660/1200',
+    ]
 
+    return coverImgs[(++coverImgsCntr) % coverImgs.length]
+}
+let avatarImgsCntr = -1;
+
+function getAvatarImage() {
+    const avatarImgs = [
+        'https://i.pravatar.cc/150?img=1',
+        'https://i.pravatar.cc/150?img=2',
+        'https://i.pravatar.cc/150?img=3',
+        'https://i.pravatar.cc/150?img=4',
+    ]
+
+    return avatarImgs[(++avatarImgsCntr) % avatarImgs.length]
+}
+const getAuthor = () => ({
+    id: 12,
+    name: "John Doe",
+    image: getAvatarImage()
+})
+const date = new Date().toString()
+const posts = {
+    stories: [
+        {
+            id: 4,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            comments_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            type: "Story",
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor()
+        },
+        {
+            id: 14,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            comments_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            type: "Story",
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor()
+        },
+        {
+            id: 44,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            comments_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            type: "Story",
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor()
+        }
+    ],
+    bounties: [
+        {
+            type: "Bounty",
+            id: 22,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            applicants_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor(),
+            deadline: "25 May",
+            reward_amount: 200_000,
+        }
+    ],
+    questions: [
+        {
+            type: "Question",
+            id: 33,
+            title: 'Digital Editor, Mars Review of Books',
+            answers_count: 31,
+            date,
+            votes_count: 70,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+            ],
+            author: getAuthor(),
+            comments: [
+                {
+                    id: 1,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+                {
+                    id: 2,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+            ]
+        },
+        {
+            type: "Question",
+            id: 233,
+            title: 'Digital Editor, Mars Review of Books',
+            answers_count: 31,
+            date,
+            votes_count: 70,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+            ],
+            author: getAuthor(),
+            comments: [
+                {
+                    id: 1,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+                {
+                    id: 2,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+            ]
+        },
+        {
+            type: "Question",
+            id: 133,
+            title: 'Digital Editor, Mars Review of Books',
+            answers_count: 31,
+            date,
+            votes_count: 70,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+            ],
+            author: getAuthor(),
+            comments: [
+                {
+                    id: 1,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+                {
+                    id: 2,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+            ]
+        }
+    ]
+}
 
 const getFeed = extendType({
     type: "Query",
@@ -104,10 +287,15 @@ const getFeed = extendType({
         t.nonNull.list.nonNull.field('getFeed', {
             type: "Post",
             args: {
-                ...paginationArgs({ take: 15 })
+                ...paginationArgs({ take: 5 })
             },
             resolve(_, { take, skip }) {
-                return []
+                const feed = [
+                    ...posts.bounties,
+                    ...posts.stories,
+                    ...posts.questions,
+                ]
+                return feed.slice(skip, skip + take);
             }
         })
     }

src/App.tsx

@@ -8,6 +8,7 @@ import { Route, Routes } from "react-router-dom";
 import CategoryPage from "src/features/Projects/pages/CategoryPage/CategoryPage";
 import { useWrapperSetup } from "./utils/Wrapper";
 import HottestPage from "src/features/Projects/pages/HottestPage/HottestPage";
+import FeedPage from "./features/Posts/pages/FeedPage/FeedPage";
 
 function App() {
   const { isWalletConnected } = useAppSelector(state => ({
@@ -39,7 +40,8 @@ function App() {
     <Routes>
       <Route path="/hottest" element={<HottestPage />} />
       <Route path="/category/:id" element={<CategoryPage />} />
-      <Route path="/" element={<ExplorePage />} />
+      {/* <Route path="/" element={<ExplorePage />} /> */}
+      <Route path="/" element={<FeedPage />} />
     </Routes>
     <ModalsContainer />
   </div>;

src/features/Posts/pages/FeedPage/FeedPage.tsx

@@ -14,7 +14,7 @@ export default function FeedPage() {
         variables: {
             take: 10,
             skip: 0
-        }
+        },
     })
     const { fetchMore, isFetchingMore } = useInfiniteQuery(feedQuery, 'getFeed')
 

src/features/Posts/pages/FeedPage/feed.graphql

@@ -56,9 +56,6 @@ query Feed($skip: Int, $take: Int) {
       }
       votes_count
       type
-      cover_image
-      deadline
-      reward_amount
       answers_count
       comments {
         id

src/features/Posts/pages/PostDetailsPage/postDetails.graphql

@@ -56,9 +56,6 @@ query PostDetails($postId: Int!) {
       }
       votes_count
       type
-      cover_image
-      deadline
-      reward_amount
       answers_count
       comments {
         id

src/graphql/index.tsx

@@ -192,12 +192,9 @@ export type Question = PostBase & {
   answers_count: Scalars['Int'];
   author: User;
   comments: Array<PostComment>;
-  cover_image: Scalars['String'];
   date: Scalars['String'];
-  deadline: Scalars['String'];
   excerpt: Scalars['String'];
   id: Scalars['Int'];
-  reward_amount: Scalars['Int'];
   tags: Array<Tag>;
   title: Scalars['String'];
   type: Scalars['String'];
@@ -260,14 +257,14 @@ export type FeedQueryVariables = Exact<{
 }>;
 
 
-export type FeedQuery = { __typename?: 'Query', getFeed: Array<{ __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> }> };
+export type FeedQuery = { __typename?: 'Query', getFeed: Array<{ __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> }> };
 
 export type PostDetailsQueryVariables = Exact<{
   postId: Scalars['Int'];
 }>;
 
 
-export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } };
+export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } };
 
 export type CategoryPageQueryVariables = Exact<{
   categoryId: Scalars['Int'];
@@ -452,9 +449,6 @@ export const FeedDocument = gql`
       }
       votes_count
       type
-      cover_image
-      deadline
-      reward_amount
       answers_count
       comments {
         id
@@ -558,9 +552,6 @@ export const PostDetailsDocument = gql`
       }
       votes_count
       type
-      cover_image
-      deadline
-      reward_amount
       answers_count
       comments {
         id

src/mocks/data/posts.ts

@@ -1,6 +1,7 @@
 
 import dayjs from "dayjs";
 import { Bounty, Post, Question, Story } from "src/features/Posts/types";
+import { randomItem } from "src/utils/helperFunctions";
 import { getAvatarImage, getCoverImage } from "./utils";
 
 const getAuthor = () => ({
@@ -28,12 +29,44 @@ export let posts = {
                 { id: 3, title: "guide" },
             ],
             author: getAuthor()
+        },
+        {
+            id: 14,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            comments_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            type: "Story",
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor()
+        },
+        {
+            id: 44,
+            title: 'Digital Editor, Mars Review of Books',
+            cover_image: getCoverImage(),
+            comments_count: 31,
+            date,
+            votes_count: 120,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            type: "Story",
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+                { id: 3, title: "guide" },
+            ],
+            author: getAuthor()
         }
     ] as Story[],
     bounties: [
         {
             type: "Bounty",
-            id: 2,
+            id: 22,
             title: 'Digital Editor, Mars Review of Books',
             cover_image: getCoverImage(),
             applicants_count: 31,
@@ -53,7 +86,63 @@ export let posts = {
     questions: [
         {
             type: "Question",
-            id: 3,
+            id: 33,
+            title: 'Digital Editor, Mars Review of Books',
+            answers_count: 31,
+            date,
+            votes_count: 70,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+            ],
+            author: getAuthor(),
+            comments: [
+                {
+                    id: 1,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+                {
+                    id: 2,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+            ]
+        },
+        {
+            type: "Question",
+            id: 233,
+            title: 'Digital Editor, Mars Review of Books',
+            answers_count: 31,
+            date,
+            votes_count: 70,
+            excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
+            tags: [
+                { id: 1, title: "lnurl" },
+                { id: 2, title: "webln" },
+            ],
+            author: getAuthor(),
+            comments: [
+                {
+                    id: 1,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+                {
+                    id: 2,
+                    author: getAuthor(),
+                    date,
+                    body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!'
+                },
+            ]
+        },
+        {
+            type: "Question",
+            id: 133,
             title: 'Digital Editor, Mars Review of Books',
             answers_count: 31,
             date,
@@ -87,7 +176,9 @@ posts.bounties = posts.bounties.map(b => ({ ...b, __typename: "Bounty" }))
 posts.questions = posts.questions.map(b => ({ ...b, __typename: "Question" }))
 posts.stories = posts.stories.map(b => ({ ...b, __typename: "Story" }))
 
-export const feed: Post[] = Array(30).fill(0).map((_, idx) => {
-    return { ...posts.stories[0], id: idx + 1, title: `Post Title ${idx + 1}` }
-})
 
+export const feed: Post[] = Array(30).fill(0).map((_, idx) => {
+    const post = randomItem(posts.bounties[0], posts.questions[0], posts.stories[0]) as Post;
+
+    return { ...post, id: idx + 1, title: `${post.type} Title ${idx + 1}` }
+})

src/utils/apollo.ts

@@ -40,6 +40,7 @@ const retryLink = new RetryLink({
 
 
 export const apolloClient = new ApolloClient({
+    connectToDevTools: true,
     link: from([
         retryLink,
         errorLink,
@@ -65,6 +66,7 @@ function offsetLimitPagination<T = Reference>(
         keyArgs,
         merge(existing, incoming, { args }) {
             const merged = existing ? existing.slice(0) : [];
+
             if (args) {
                 // Assume an skip of 0 if args.skip omitted.
                 const { skip = 0 } = args;

src/utils/hooks/useInfiniteQuery.ts

@@ -10,7 +10,6 @@ export const useInfiniteQuery = (query: QueryResult, dataField: string) => {
         () => {
             if (!fetchingMore && !reachedLastPage) {
                 setFetchingMore(true);
-                // console.log(feedQuery.variables?.skip);
 
                 query.fetchMore({
                     variables: {