Add ky to fetch data from server

package.json

@@ -40,6 +40,7 @@
     "@sentry/webpack-plugin": "^1.18.8",
     "babel-plugin-macros": "^3.1.0",
     "dayjs": "^1.11.0",
+    "ky": "^0.30.0",
     "next": "12.1.2",
     "nprogress": "^0.2.0",
     "react": "17.0.2",

pages/index.tsx

@@ -54,31 +54,39 @@ export default function Index(props: Props): JSX.Element {
 
 export async function getStaticProps() {
   const date = new Date().toISOString()
-  const eventUrl = `https://api.eventyay.com/v1/events?cache=true
-  &filter=[{"and":[{"name":"state","op":"eq","val":"published"},{"name":"privacy","op":"eq","val":"public"},{"name":"is-featured","op":"eq","val":true}]},{"or":[{"name":"ends-at","op":"ge","val":"${date}"}]}]
-  &page[size]=6
-  &public=true
-  &sort=starts-at`
-  const upcomingEventUrl = `https://api.eventyay.com/v1/events/upcoming?cache=true&page[size]=3&public=true&upcoming=true`
-  const groupsUrl = `https://api.eventyay.com/v1/groups?cache=true&filter=[{"name":"is-promoted","op":"eq","val":true}]&include=user,follower&page[size]=3&public=true`
+  const event = await fetch(
+    `https://api.eventyay.com/v1/events?filter=[{"and":[{"name":"state","op":"eq","val":"published"},{"name":"privacy","op":"eq","val":"public"},{"name":"is-featured","op":"eq","val":true}]},{"or":[{"name":"ends-at","op":"ge","val":"${date}"}]}]&page[size]=6&public=true&sort=starts-at`
+  )
+    .then((res) => {
+      return res.json()
+    })
+    .catch((err) => console.error(err))
 
-  const [event, eventErr] = await fetcher(eventUrl)
-  if (eventErr) {
-    console.error(eventErr)
-  }
-  const events = toCamelCase(event.data)
+  const events = toCamelCase(event?.data)
 
-  const [upcomingEvent, upcomingEventErr] = await fetcher(upcomingEventUrl)
+  const [upcomingEvent, upcomingEventErr] = await fetcher({
+    url: 'events/upcoming?page[size]=3&public=true&upcoming=true',
+  })
   if (upcomingEventErr) {
     console.error(upcomingEventErr)
   }
-  const upcomingEvents = toCamelCase(upcomingEvent.data)
+  const upcomingEvents = toCamelCase(upcomingEvent?.data)
+
+  const grpFilter = JSON.stringify([
+    {
+      name: 'is-promoted',
+      op: 'eq',
+      val: 'true',
+    },
+  ])
 
-  const [group, groupErr] = await fetcher(groupsUrl)
+  const [group, groupErr] = await fetcher({
+    url: `groups?filter=${grpFilter}&include=user,follower&page[size]=3&public=true`,
+  })
   if (groupErr) {
     console.error(groupErr)
   }
-  const groups = toCamelCase(group.data)
+  const groups = toCamelCase(group?.data)
 
   return {
     props: { events, upcomingEvents, groups },

src/ky/instance.ts

@@ -0,0 +1,10 @@
+import ky from 'ky'
+
+const BASE_URL = 'https://api.eventyay.com/v1'
+
+export const instance = ky.create({
+  prefixUrl: BASE_URL,
+  headers: {
+    Accept: 'application/vnd.api+json',
+  },
+})

src/types/main.d.ts

@@ -1,3 +1,7 @@
+interface ServerProp {
+  data: ServerData[]
+}
+
 interface ServerData {
   type: string
   attributes: any

utils/fetcher.ts

@@ -1,8 +1,20 @@
-export default async function fetcher(url: string) {
+import { instance } from '../src/ky/instance'
+
+interface Props {
+  url: string
+  method?: string
+}
+
+export default async function fetcher({
+  url,
+  method = 'GET',
+}: Props): Promise<[data: ServerProp | null, err: any]> {
   try {
-    const data = await fetch(url)
-    const res = await data.json()
-    return [res, null]
+    const data: ServerProp = await instance(url, {
+      method: method,
+    }).json()
+
+    return [data, null]
   } catch (err) {
     return [null, err]
   }

yarn.lock

@@ -3885,6 +3885,11 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+ky@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/ky/-/ky-0.30.0.tgz#a3d293e4f6c4604a9a4694eceb6ce30e73d27d64"
+  integrity sha512-X/u76z4JtDVq10u1JA5UQfatPxgPaVDMYTrgHyiTpGN2z4TMEJkIHsoSBBSg9SWZEIXTKsi9kHgiQ9o3Y/4yog==
+
 language-subtag-registry@~0.3.2:
   version "0.3.21"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"