data fetching with useSWR

This commit is contained in:
Matthias Kretschmann 2022-10-20 10:14:31 +01:00
parent 92dc57905e
commit e77c68d211
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 25 additions and 19 deletions

15
package-lock.json generated
View File

@ -17,6 +17,7 @@
"next": "12.3.1", "next": "12.3.1",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"swr": "^1.3.0",
"tiny-relative-date": "^1.3.0" "tiny-relative-date": "^1.3.0"
}, },
"devDependencies": { "devDependencies": {
@ -6446,6 +6447,14 @@
"node": ">=10.13.0" "node": ">=10.13.0"
} }
}, },
"node_modules/swr": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
"integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
"peerDependencies": {
"react": "^16.11.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/text-table": { "node_modules/text-table": {
"version": "0.2.0", "version": "0.2.0",
"dev": true, "dev": true,
@ -10829,6 +10838,12 @@
"stable": "^0.1.8" "stable": "^0.1.8"
} }
}, },
"swr": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
"integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
"requires": {}
},
"text-table": { "text-table": {
"version": "0.2.0", "version": "0.2.0",
"dev": true "dev": true

View File

@ -20,6 +20,7 @@
"next": "12.3.1", "next": "12.3.1",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"swr": "^1.3.0",
"tiny-relative-date": "^1.3.0" "tiny-relative-date": "^1.3.0"
}, },
"devDependencies": { "devDependencies": {

View File

@ -1,6 +1,6 @@
import Head from 'next/head' import Head from 'next/head'
import React, { Fragment, ReactElement, useEffect, useState } from 'react' import React, { Fragment, ReactElement } from 'react'
import { State, Status } from '../@types' import { State } from '../@types'
import styles from '../styles/Home.module.css' import styles from '../styles/Home.module.css'
import { getData } from '../utils/getData' import { getData } from '../utils/getData'
import LogoAsset from '../images/logo.svg' import LogoAsset from '../images/logo.svg'
@ -9,6 +9,7 @@ import GithubAsset from '../images/github.svg'
import addresses from '@oceanprotocol/contracts/addresses/address.json' import addresses from '@oceanprotocol/contracts/addresses/address.json'
import { statusApiUri } from '../../app.config' import { statusApiUri } from '../../app.config'
import relativeDate from 'tiny-relative-date' import relativeDate from 'tiny-relative-date'
import useSWR from 'swr'
function statusIcon(state: State): ReactElement { function statusIcon(state: State): ReactElement {
if (state === State.Normal) { if (state === State.Normal) {
@ -31,20 +32,10 @@ function statusStyle(state: State) {
} }
export default function HomePage(): ReactElement { export default function HomePage(): ReactElement {
const [data, setData] = useState<{ [key: string]: Status }>() const { data, error } = useSWR(statusApiUri, getData, {
const [isLoading, setIsloading] = useState<boolean>() refreshInterval: 60000
const [error, setError] = useState<string>() })
const isLoading = !data && !error
useEffect(() => {
async function getStatuses() {
setIsloading(true)
const data = await getData()
if (!data) setError(`Could not get data from ${statusApiUri}`)
setData(data)
setIsloading(false)
}
getStatuses()
}, [])
return ( return (
<div className={styles.app}> <div className={styles.app}>

View File

@ -1,10 +1,9 @@
import axios, { AxiosResponse } from 'axios' import axios, { AxiosResponse } from 'axios'
import { Status } from '../@types' import { Status } from '../@types'
import { statusApiUri } from '../../app.config'
export async function getData(): Promise<{ [key: string]: Status }> { export async function getData(url: string): Promise<{ [key: string]: Status }> {
try { try {
const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`) const response: AxiosResponse<Status[]> = await axios.get(url)
if (!response?.data || response.status !== 200) if (!response?.data || response.status !== 200)
throw Error('ERROR: no data recieved') throw Error('ERROR: no data recieved')