offset-limit

CHANGELOG.txt

@@ -1,5 +1,5 @@
 [0.5.1]
-[+] nanostores-based custom spa routing
+[+] nanostores-base global store
 [-] Root.tsx components
 [+] astro/solid basic hydration
 

package.json

@@ -51,7 +51,7 @@
     "@astrojs/partytown": "^1.0.0",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/solid-js": "^1.0.0",
-    "@astrojs/vercel": "^1.0.1",
+    "@astrojs/vercel": "^2.0.0",
     "@babel/core": "^7.18.13",
     "@graphql-codegen/cli": "^2.6.1",
     "@graphql-codegen/typescript": "^2.5.1",

src/components/Nav/AuthModal.tsx

@@ -9,6 +9,7 @@ import { useStore } from '@nanostores/solid'
 import { session as sessionstore, signIn } from '../../stores/auth'
 import { apiClient } from '../../utils/apiClient'
 import { useValidator } from '../../utils/validators'
+import { baseUrl } from '../../graphql/publicGraphQLClient'
 
 type AuthMode = 'sign-in' | 'sign-up' | 'forget' | 'reset' | 'resend' | 'password'
 
@@ -47,8 +48,6 @@ export default (props: { code?: string; mode?: string }) => {
 
   // 3rd party providier auth handler
   const oauth = (provider: string): void => {
-    // TODO: move to config
-    const baseUrl = 'https://newapi.discours.io'
     const popup = window.open(`${baseUrl}/oauth/${provider}`, provider, 'width=740, height=420')
     popup?.focus()
     hideModal()

src/graphql/privateGraphQLClient.ts

@@ -1,14 +1,12 @@
 import { createClient, ClientOptions, dedupExchange, fetchExchange, Exchange } from '@urql/core'
 import { devtoolsExchange } from '@urql/devtools'
 import { authExchanges } from './auth'
+import { baseUrl } from './publicGraphQLClient'
 
 const isDev = true
 
 const TOKEN_LOCAL_STORAGE_KEY = 'token'
 
-//export const baseUrl = 'http://localhost:8000'
-export const baseUrl = 'https://newapi.discours.io'
-
 const exchanges: Exchange[] = [dedupExchange, ...authExchanges, fetchExchange]
 
 if (isDev) {

src/graphql/publicGraphQLClient.ts

@@ -4,8 +4,8 @@ import { devtoolsExchange } from '@urql/devtools'
 // FIXME actual value
 const isDev = true
 
-export const baseUrl = 'https://newapi.discours.io'
-//export const baseUrl = 'http://localhost:8000'
+// export const baseUrl = 'https://newapi.discours.io'
+export const baseUrl = 'http://localhost:8000'
 
 const exchanges: Exchange[] = [dedupExchange, fetchExchange]
 

src/graphql/query/article-reactions.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query ReactionsByShoutQuery($slug: String!, $page: Int!, $size: Int!) {
-    reactionsByShout(slug: $slug, page: $page, size: $size) {
+  query ReactionsByShoutQuery($limit: String!, $limit: Int!, $offset: Int!) {
+    reactionsByShout(slug: $slug, limit: $limit, offset: $offset) {
       id
       body
       createdAt

src/graphql/query/articles-for-author-reactions.ts

@@ -3,7 +3,7 @@ import { gql } from '@urql/core'
 // WARNING: need Auth header
 
 export default gql`
-  query ShoutsReactedByUserQuery($slug: String!, $page: Int!, $size: Int!) {
+  query ShoutsReactedByUserQuery($limit: String!, $limit: Int!, $offset: Int!) {
     userReactedShouts(slug: String!, page: Int!, size: Int!) {
       _id: slug
       title

src/graphql/query/articles-for-authors.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query ShoutsForAuthorsQuery($slugs: [String]!, $page: Int!, $size: Int!) {
-    shoutsByAuthors(slugs: $slugs, page: $page, size: $size) {
+  query ShoutsForAuthorsQuery($slugs: [String]!, $limit: Int!, $offset: Int!) {
+    shoutsByAuthors(slugs: $slugs, limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-for-communities.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query ShoutsForCommunitiesQuery($slugs: [String]!, $page: Int!, $size: Int!) {
-    shoutsByCommunities(slugs: $slugs, page: $page, size: $size) {
+  query ShoutsForCommunitiesQuery($slugs: [String]!, $limit: Int!, $offset: Int!) {
+    shoutsByCommunities(slugs: $slugs, limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-for-feed.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query ShoutsBySessionQuery($page: Int!, $size: Int!) {
-    shoutsForFeed(page: $page, size: $size) {
+  query ShoutsBySessionQuery($limit: Int!, $offset: Int!) {
+    shoutsForFeed(limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-for-topics.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query ShoutsForTopicsQuery($slugs: [String]!, $page: Int!, $size: Int!) {
-    shoutsByTopics(slugs: $slugs, page: $page, size: $size) {
+  query ShoutsForTopicsQuery($slugs: [String]!, $limit: Int!, $offset: Int!) {
+    shoutsByTopics(slugs: $slugs, limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-recent-all.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query RecentAllQuery($page: Int!, $size: Int!) {
-    recentAll(page: $page, size: $size) {
+  query RecentAllQuery($limit: Int!, $offset: Int!) {
+    recentAll(limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-recent-published.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query RecentPublishedQuery($page: Int!, $size: Int!) {
-    recentPublished(page: $page, size: $size) {
+  query RecentPublishedQuery($limit: Int!, $offset: Int!) {
+    recentPublished(limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-top-month.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query TopMonthShoutsQuery($page: Int!, $size: Int!) {
-    topMonth(page: $page, size: $size) {
+  query TopMonthShoutsQuery($limit: Int!, $offset: Int!) {
+    topMonth(limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-top-rated.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query TopOverallShoutsQuery($page: Int!, $size: Int!) {
-    topOverall(page: $page, size: $size) {
+  query TopOverallShoutsQuery($limit: Int!, $offset: Int!) {
+    topOverall(limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/articles-top-viewed.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query TopViewedShoutsQuery($page: Int!, $size: Int!) {
-    topViewed(page: $page, size: $size) {
+  query TopViewedShoutsQuery($limit: Int!, $offset: Int!) {
+    topViewed(limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/query/author-reactions.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query ReactionsByAuthorQuery($author: String!, $page: Int!, $size: Int!) {
-    reactionsByAuthor(slug: $author, page: $page, size: $size) {
+  query ReactionsByAuthorQuery($author: String!, $limit: Int!, $offset: Int!) {
+    reactionsByAuthor(slug: $author, limit: $limit, offset: $offset) {
       id
       body
       createdAt

src/graphql/query/authors-all.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query AuthorssAllQuery($page: Int!, $size: Int!) {
-    authorsAll(page: $page, size: $size) {
+  query AuthorssAllQuery($limit: Int!, $offset: Int!) {
+    authorsAll(limit: $limit, offset: $offset) {
       _id: slug
       slug
       name

src/graphql/query/reactions-for-shouts.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query ReactionsForShoutsQuery($shouts: [String]!, $page: Int!, $size: Int!) {
-    reactionsForShouts(shouts: $shouts, page: $page, size: $size) {
+  query ReactionsForShoutsQuery($shouts: [String]!, $limit: Int!, $offset: Int!) {
+    reactionsForShouts(shouts: $shouts, limit: $limit, offset: $offset) {
       id
       createdBy {
         slug

src/graphql/query/search-results.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query SearchResultsQuery($q: String!, $page: Int!, $size: Int!) {
-    searchQuery(q: $q, page: $page, size: $size) {
+  query SearchResultsQuery($q: String!, $limit: Int!, $offset: Int!) {
+    searchQuery(q: $q, limit: $limit, offset: $offset) {
       _id: slug
       title
       subtitle

src/graphql/types.gen.ts

@@ -371,8 +371,8 @@ export type Query = {
 }
 
 export type QueryAuthorsAllArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryEnterChatArgs = {
@@ -386,8 +386,8 @@ export type QueryGetCommunityArgs = {
 
 export type QueryGetMessagesArgs = {
   chatId: Scalars['String']
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryGetShoutBySlugArgs = {
@@ -411,41 +411,41 @@ export type QueryIsEmailUsedArgs = {
 }
 
 export type QueryMyCandidatesArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryReactionsByAuthorArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
   slug: Scalars['String']
 }
 
 export type QueryReactionsByShoutArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
   slug: Scalars['String']
 }
 
 export type QueryReactionsForShoutsArgs = {
-  page: Scalars['Int']
+  limit: Scalars['Int']
   shouts: Array<InputMaybe<Scalars['String']>>
-  size: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryRecentAllArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryRecentPublishedArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryRecentReactedArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QuerySearchQueryArgs = {
@@ -455,8 +455,8 @@ export type QuerySearchQueryArgs = {
 }
 
 export type QueryShoutsByAuthorsArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
   slugs: Array<InputMaybe<Scalars['String']>>
 }
 
@@ -467,20 +467,20 @@ export type QueryShoutsByCollectionArgs = {
 }
 
 export type QueryShoutsByCommunitiesArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
   slugs: Array<InputMaybe<Scalars['String']>>
 }
 
 export type QueryShoutsByTopicsArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
   slugs: Array<InputMaybe<Scalars['String']>>
 }
 
 export type QueryShoutsForFeedArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QuerySignInArgs = {
@@ -489,18 +489,18 @@ export type QuerySignInArgs = {
 }
 
 export type QueryTopMonthArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryTopOverallArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryTopViewedArgs = {
-  page: Scalars['Int']
-  size: Scalars['Int']
+  limit: Scalars['Int']
+  offset: Scalars['Int']
 }
 
 export type QueryTopicsByAuthorArgs = {

src/pages/feed/index.astro

@@ -3,7 +3,7 @@ import { FeedPage } from '../../components/Views/Feed'
 import Zine from '../../layouts/zine.astro'
 import { apiClient } from '../../utils/apiClient'
 
-const recentArticles = await apiClient.getRecentArticles({ page: 1 })
+const recentArticles = await apiClient.getRecentArticles({ limit: 50, offset: 0 })
 const shoutSlugs = recentArticles.map((s) => s.slug)
 const reactions = await apiClient.getReactionsForShouts({ shoutSlugs })
 ---

src/pages/index.astro

@@ -4,7 +4,7 @@ import Zine from '../layouts/zine.astro'
 import { apiClient } from '../utils/apiClient'
 
 const randomTopics = await apiClient.getRandomTopics()
-const recentPublished = await apiClient.getRecentPublishedArticles({ page: 1 })
+const recentPublished = await apiClient.getRecentPublishedArticles({ limit: 50, offset: 0 })
 const topMonth = await apiClient.getTopMonthArticles()
 const topOverall = await apiClient.getTopArticles()
 

src/pages/search.astro

@@ -5,7 +5,7 @@ import { apiClient } from '../utils/apiClient'
 
 const params: URLSearchParams = Astro.url.searchParams
 const q = params.get('q')
-const results = await apiClient.getSearchResults({ query: q })
+const results = await apiClient.getSearchResults({ query: q, limit: 50, offset: 0 })
 ---
 
 <Zine>

src/pages/topic/[slug].astro

@@ -4,9 +4,9 @@ import Zine from '../../layouts/zine.astro'
 import { apiClient } from '../../utils/apiClient'
 
 const slug = Astro.params.slug?.toString() || ''
-const page = parseInt(Astro.params?.page as string, 10) || 1
-const size = parseInt(Astro.params?.size as string, 10) || 50
-const articles = await apiClient.getArticlesForTopics({ topicSlugs: [slug], page, size })
+const limit = parseInt(Astro.params?.limit as string, 10) || 50
+const offset = parseInt(Astro.params?.offset as string, 10) || 0
+const articles = await apiClient.getArticlesForTopics({ topicSlugs: [slug], limit, offset })
 const topic = articles[0].topics.find(({ slug: topicSlug }) => topicSlug === slug)
 
 Astro.response.headers.set('Cache-Control', 's-maxage=1, stale-while-revalidate')

src/utils/apiClient.ts

@@ -33,31 +33,27 @@ import authorsBySlugs from '../graphql/query/authors-by-slugs'
 
 const log = getLogger('api-client')
 
-const DEFAULT_AUTHOR_ARTICLES_PAGE_SIZE = 50
-const DEFAULT_TOPIC_ARTICLES_PAGE_SIZE = 50
-const DEFAULT_RECENT_ARTICLES_PAGE_SIZE = 50
-const DEFAULT_REACTIONS_PAGE_SIZE = 50
-const DEFAULT_SEARCH_RESULTS_PAGE_SIZE = 50
-const DEFAULT_PUBLISHED_ARTICLES_PAGE_SIZE = 50
+const FEED_SIZE = 50
+const REACTIONS_PAGE_SIZE = 100
 const DEFAULT_RANDOM_TOPICS_AMOUNT = 12
 
 export const apiClient = {
   getTopArticles: async () => {
-    const response = await publicGraphQLClient.query(articlesTopRated, { page: 1, size: 10 }).toPromise()
+    const response = await publicGraphQLClient.query(articlesTopRated, { limit: 10, offset: 0 }).toPromise()
     return response.data.topOverall
   },
   getTopMonthArticles: async () => {
-    const response = await publicGraphQLClient.query(articlesTopMonth, { page: 1, size: 10 }).toPromise()
+    const response = await publicGraphQLClient.query(articlesTopMonth, { limit: 10, offset: 0 }).toPromise()
     return response.data.topMonth
   },
   getRecentPublishedArticles: async ({
-    page = 1,
-    size = DEFAULT_RECENT_ARTICLES_PAGE_SIZE
+    limit = FEED_SIZE,
+    offset = 0
   }: {
-    page?: number
-    size?: number
+    limit?: number
+    offset?: number
   }) => {
-    const response = await publicGraphQLClient.query(articlesRecentPublished, { page, size }).toPromise()
+    const response = await publicGraphQLClient.query(articlesRecentPublished, { limit, offset }).toPromise()
 
     return response.data.recentPublished
   },
@@ -70,34 +66,34 @@ export const apiClient = {
   },
   getSearchResults: async ({
     query,
-    page = 1,
-    size = DEFAULT_SEARCH_RESULTS_PAGE_SIZE
+    limit = FEED_SIZE,
+    offset = 0
   }: {
     query: string
-    page?: number
-    size?: number
+    limit: number
+    offset: number
   }): Promise<Shout[]> => {
     const response = await publicGraphQLClient
       .query(searchResults, {
         q: query,
-        page,
-        size
+        limit,
+        offset
       })
       .toPromise()
 
     return response.data.searchQuery
   },
   getRecentArticles: async ({
-    page = 1,
-    size = DEFAULT_RECENT_ARTICLES_PAGE_SIZE
+    limit = FEED_SIZE,
+    offset = 0
   }: {
-    page?: number
-    size?: number
+    limit: number
+    offset: number
   }): Promise<Shout[]> => {
     const response = await publicGraphQLClient
       .query(articlesRecentAll, {
-        page,
-        size
+        limit,
+        offset
       })
       .toPromise()
 
@@ -105,18 +101,18 @@ export const apiClient = {
   },
   getArticlesForTopics: async ({
     topicSlugs,
-    page = 1,
-    size = DEFAULT_TOPIC_ARTICLES_PAGE_SIZE
+    limit = FEED_SIZE,
+    offset = 0
   }: {
     topicSlugs: string[]
-    page?: number
-    size?: number
+    limit: number
+    offset: number
   }): Promise<Shout[]> => {
     const response = await publicGraphQLClient
       .query(articlesForTopics, {
         slugs: topicSlugs,
-        page,
-        size
+        limit,
+        offset
       })
       .toPromise()
 
@@ -124,18 +120,18 @@ export const apiClient = {
   },
   getArticlesForAuthors: async ({
     authorSlugs,
-    page = 1,
-    size = DEFAULT_AUTHOR_ARTICLES_PAGE_SIZE
+    limit = FEED_SIZE,
+    offset = 0
   }: {
     authorSlugs: string[]
-    page?: number
-    size?: number
+    limit: number
+    offset: number
   }): Promise<Shout[]> => {
     const response = await publicGraphQLClient
       .query(articlesForAuthors, {
         slugs: authorSlugs,
-        page,
-        size
+        limit,
+        offset
       })
       .toPromise()
 
@@ -192,14 +188,8 @@ export const apiClient = {
     const response = await privateGraphQLClient.mutation(mySession, {}).toPromise()
     return response.data.refreshSession
   },
-  getPublishedArticles: async ({
-    page = 1,
-    size = DEFAULT_PUBLISHED_ARTICLES_PAGE_SIZE
-  }: {
-    page?: number
-    size?: number
-  }) => {
-    const response = await publicGraphQLClient.query(articlesRecentPublished, { page, size }).toPromise()
+  getPublishedArticles: async ({ limit = FEED_SIZE, offset }: { limit?: number; offset?: number }) => {
+    const response = await publicGraphQLClient.query(articlesRecentPublished, { limit, offset }).toPromise()
 
     return response.data.recentPublished
   },
@@ -209,7 +199,7 @@ export const apiClient = {
   },
 
   getAllAuthors: async () => {
-    const response = await publicGraphQLClient.query(authorsAll, { page: 1, size: 999999 }).toPromise()
+    const response = await publicGraphQLClient.query(authorsAll, { limit: 9999, offset: 9999 }).toPromise()
     return response.data.authorsAll
   },
   getArticle: async ({ slug }: { slug: string }): Promise<Shout> => {
@@ -222,18 +212,18 @@ export const apiClient = {
 
   getReactionsForShouts: async ({
     shoutSlugs,
-    page = 1,
-    size = DEFAULT_REACTIONS_PAGE_SIZE
+    limit = FEED_SIZE,
+    offset = 0
   }: {
     shoutSlugs: string[]
-    page?: number
-    size?: number
+    limit?: number
+    offset?: number
   }): Promise<Reaction[]> => {
     const response = await publicGraphQLClient
       .query(reactionsForShouts, {
         shouts: shoutSlugs,
-        page,
-        size
+        limit,
+        offset
       })
       .toPromise()
 
@@ -241,18 +231,18 @@ export const apiClient = {
   },
   getArticleReactions: async ({
     articleSlug,
-    page,
-    size
+    limit = REACTIONS_PAGE_SIZE,
+    offset = 0
   }: {
     articleSlug: string
-    page: number
-    size: number
+    limit: number
+    offset: number
   }): Promise<Reaction[]> => {
     const response = await publicGraphQLClient
       .query(articleReactions, {
         slug: articleSlug,
-        page,
-        size
+        limit,
+        offset
       })
       .toPromise()
 

yarn.lock

@@ -182,10 +182,10 @@
     node-fetch "^3.2.5"
     which-pm-runs "^1.1.0"
 
-"@astrojs/vercel@^1.0.1":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@astrojs/vercel/-/vercel-1.0.2.tgz#b05b9ce7c98b113b7461e4e7588318e88801e0f2"
-  integrity sha512-IdEkJQVZ9iBVCrojVHbwoFWJ4uF4SBo0GuC4vMDL+wuZPnjV6TnZZDJwl77HwylFqbqujjmm4pvqhHJAQ8GTFA==
+"@astrojs/vercel@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@astrojs/vercel/-/vercel-2.0.0.tgz#4a9d750bd0784858a0acd073a8794df3d1a40fc9"
+  integrity sha512-KUg2PAJO/hNXx3DYPwORrzSiTgFucQwaNePjTXly58xlbYkZIppspgKuCPA2+vpmMyoRg4+YuRNEjacJk5bVAQ==
   dependencies:
     "@astrojs/webapi" "^1.0.0"
     "@vercel/nft" "^0.18.2"