I am new to React testing and I am trying to write the tests for this custom hook which basically fetches data from an API and returns it.
const useFetch = (url) => {
const [response, setResponseData] = useState();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(response => {
if(response.ok === false){
throw Error('could not fetch the data for that resource');
}
return response.json();
})
.then(data => {
setResponseData(data);
setIsLoading(false);
})
.catch((err) => {
console.log(err.message);
})
}, [url]);
return {response, isLoading};
}
export default useFetch;
Since I am new to this I have tried many solutions but nothing is working and I am getting confused too. Can you provide me a simple test for this so that I can get an idea as to how it is done?
here's an example https://testing-library.com/docs/react-testing-library/example-intro/ using msw library to mock server call.
If you mock the server instead of the hook, it will be more resilient to changes.
Moreover, I suggest you to use a library like react-query or read source code of them and reimplement them if you want to learn to avoid fetching pitfalls
I am trying to read a JSON file as a static prop to initialize a method for the project. But the problem is I am getting an error when I try to call the function that calls the method that reads the JSON file.
This is from the component function
import Web3 from "web3"
import fs from 'fs'
import buildData from '../../build/contracts/Betting.json'
// export local copies of contracts
export const getStaticProps = async () => {
const data = JSON.stringify(await buildData.abi);
return {
props: {data,},
}
}
const provider = new Web3.providers.HttpProvider(
process.env.NEXT_PUBLIC_RINKEBY_RPC_URL
)
const web3 = new Web3(provider)
const abi = await getStaticProps()
const bettingContract = async (web3) => {
return new web3.eth.Contract(
await abi,
"0x65b01f0f4Ec1885bD00D8C6dC8027fcc1316BCC4"
)
}
export default bettingContract
In my useEffect hook that calls it (EDITED):
useEffect( () => {
const getPrizeMoneyHandler = async () => {
const prizeMoney = await bettingContract.methods.getPrizeMoney().call()
setPrizeMoney(prizeMoney)
}
getPrizeMoneyHandler()
return () => {
// this now gets called when the component unmounts
};
})
I get the error:
Unhandled Runtime Error
TypeError: _blockchain_resplendent_contract_export__WEBPACK_IMPORTED_MODULE_5__.default.methods is undefined
This is specifically when I try to run getPrizeMoneyHandler() in the useEffect hook in the main application file. I know that I am able to retrieve the abi JSON data within the first code block. But I admit I don't know if it comes in time before I export bettingContract. I am going to assume my issue is not being able to call the promise correctly in the useEffect hook.
What am I doing wrong?
EDIT: I looked a tid tad more into my problem and I reworked the use Effect hook to be the above and I still have the error so I don't think it's a promise issue but something up with the first component function at the top, bettingContract. Any ideas to how to debug this?
I'm new to Next.js and I'm trying to understand the suggested structure and dealing with data between pages or components.
For instance, inside my page home.js, I fetch an internal API called /api/user.js which returns some user data from MongoDB. I am doing this by using fetch() to call the API route from within getServerSideProps(), which passes various props to the page after some calculations.
From my understanding, this is good for SEO, since props get fetched/modified server-side and the page gets them ready to render. But then I read in the Next.js documentation that you should not use fetch() to all an API route in getServerSideProps(). So what am I suppose to do to comply to good practice and good SEO?
The reason I'm not doing the required calculations for home.js in the API route itself is that I need more generic data from this API route, as I will use it in other pages as well.
I also have to consider caching, which client-side is very straightforward using SWR to fetch an internal API, but server-side I'm not yet sure how to achieve it.
home.js:
export default function Page({ prop1, prop2, prop3 }) {
// render etc.
}
export async function getServerSideProps(context) {
const session = await getSession(context)
let data = null
var aArray = [], bArray = [], cArray = []
const { db } = await connectToDatabase()
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
if (session) {
const hostname = process.env.NEXT_PUBLIC_SITE_URL
const options = { headers: { cookie: context.req.headers.cookie } }
const res = await fetch(`${hostname}/api/user`, options)
const json = await res.json()
if (json.data) { data = json.data }
// do some math with data ...
// connect to MongoDB and do some comparisons, etc.
But then I read in the Next.js documentation that you should not use fetch() to all an API route in getServerSideProps().
You want to use the logic that's in your API route directly in getServerSideProps, rather than calling your internal API. That's because getServerSideProps runs on the server just like the API routes (making a request from the server to the server itself would be pointless). You can read from the filesystem or access a database directly from getServerSideProps. Note that this only applies to calls to internal API routes - it's perfectly fine to call external APIs from getServerSideProps.
From Next.js getServerSideProps documentation:
It can be tempting to reach for an API Route when you want to fetch
data from the server, then call that API route from
getServerSideProps. This is an unnecessary and inefficient approach,
as it will cause an extra request to be made due to both
getServerSideProps and API Routes running on the server.
(...) Instead, directly import the logic used inside your API Route
into getServerSideProps. This could mean calling a CMS, database, or
other API directly from inside getServerSideProps.
(Note that the same applies when using getStaticProps/getStaticPaths methods)
Here's a small refactor example that allows you to have logic from an API route reused in getServerSideProps.
Let's assume you have this simple API route.
// pages/api/user
export default async function handler(req, res) {
// Using a fetch here but could be any async operation to an external source
const response = await fetch(/* external API endpoint */)
const jsonData = await response.json()
res.status(200).json(jsonData)
}
You can extract the fetching logic to a separate function (can still keep it in api/user if you want), which is still usable in the API route.
// pages/api/user
export async function getData() {
const response = await fetch(/* external API endpoint */)
const jsonData = await response.json()
return jsonData
}
export default async function handler(req, res) {
const jsonData = await getData()
res.status(200).json(jsonData)
}
But also allows you to re-use the getData function in getServerSideProps.
// pages/home
import { getData } from './api/user'
//...
export async function getServerSideProps(context) {
const jsonData = await getData()
//...
}
You want to use the logic that's in your API route directly in
getServerSideProps, rather than calling your internal API. That's
because getServerSideProps runs on the server just like the API routes
(making a request from the server to the server itself would be
pointless). You can read from the filesystem or access a database
directly from getServerSideProps
As I admit, what you say is correct but problem still exist. Assume you have your backend written and your api's are secured so fetching out logic from a secured and written backend seems to be annoying and wasting time and energy. Another disadvantage is that by fetching out logic from backend you must rewrite your own code to handle errors and authenticate user's and validate user request's that exist in your written backend. I wonder if it's possible to call api's within nextjs without fetching out logic from middlewars? The answer is positive here is my solution:
npm i node-mocks-http
import httpMocks from "node-mocks-http";
import newsController from "./api/news/newsController";
import logger from "../middlewares/logger";
import dbConnectMid from "../middlewares/dbconnect";
import NewsCard from "../components/newsCard";
export default function Home({ news }) {
return (
<section>
<h2>Latest News</h2>
<NewsCard news={news} />
</section>
);
}
export async function getServerSideProps() {
let req = httpMocks.createRequest();
let res = httpMocks.createResponse();
async function callMids(req, res, index, ...mids) {
index = index || 0;
if (index <= mids.length - 1)
await mids[index](req, res, () => callMids(req, res, ++index, ...mids));
}
await callMids(
req,
res,
null,
dbConnectMid,
logger,
newsController.sendAllNews
);
return {
props: { news: res._getJSONData() },
};
}
important NOTE: don't forget to use await next() instead of next() if you use my code in all of your middlewares or else you get an error.
Another solution: next connect has run method that do something like mycode but personally I had some problems with it; here is its link:
next connet run method to call next api's in serverSideProps
Just try to use useSWR, example below
import useSWR from 'swr'
import React from 'react';
//important to return only result, not Promise
const fetcher = (url) => fetch(url).then((res) => res.json());
const Categories = () => {
//getting data and error
const { data, error } = useSWR('/api/category/getCategories', fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>
if (data){
// {data} is completed, it's ok!
//your code here to make something with {data}
return (
<div>
//something here, example {data.name}
</div>
)
}
}
export default Categories
Please notice, fetch only supports absolute URLs, it's why I don't like to use it.
P.S. According to the docs, you can even use useSWR with SSR.
I am sending api requests to a database in order to receive data inside a widget, perform a little bit of processing on the data, then plot it and render it to my web page. This is being done in a react web app.
I am using fetch to get the data and receiving a promise. The fetching is being done inside a function which I will later call multiple times. I have found examples of how to directly console.log the data from fetch promises when making api calls, but doing this inside a function always seems to result in a promise for me... I have no idea how to return the data!
Any help that can be provided would be very much appreciated. My current code is below and returns a promise.
Thank you.
class MyWidget extends Component {
constructor(props) {
super(props)
}
async fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
async readDB(url) {
const data = await this.fetchData(url);
return data
}
processingFunction() {
const url = 'my/database/api/variable=X'
const database_data = this.readDB(url)
// perform processing on database data...
// plot processed data...
}
You have to await in the processingFunction which also has to be changed to async
async processingFunction() { // change to async
const url = 'my/database/api/variable=X'
const database_data = await this.readDB(url); // await the async result
// perform processing on database data...
// plot processed data...
}
but it seems that you don't need the readDB func at all
async processingFunction() {
const url = 'my/database/api/variable=X'
const database_data = await this.fetchData(url);
}
UPDATE
You cannot convert Promise into Array or else. There is a certain flow in React: state + life-cycle hooks. In this case you have to store data in state and use componentDidMount hook
import React, {Component} from 'react'
class MyWidget extends Component {
state = {
dataFromDB: null // set initial state
};
processingFunction() {
const yourData = this.state.dataFromDB;
// perform processing on database data...
// plot processed data...
}
async componentDidMount() {
const url = "my/database/api/variable=X";
const database_data = await this.fetchData(url);
this.setState(() => ({
dataFromDB: database_data // set data in state from DB
}));
}
...
}
I'm dealing with a project that uses AWS Cognito. There are some configuration params that needs to be fetched from server with an API call. I keep the API call in a config.js file and use async/await to get response from server like this
const getCognitoConfigs = async () => {
const res = await axios.get(`${apiurl.apiurl}/logininfo`);
console.log(res.data);
return res.data;
};
export default getCognitoConfigs;
And in my index.js (where I set up Cognito), I import the function from config.js file
import getCognitoConfigs from "./config";
const configs = getCognitoConfigs();
Amplify.configure({
Auth: {
mandatorySignIn: true,
region: configs.cognito.region,
userPoolId: configs.cognito.user_pool,
userPoolWebClientId: configs.cognito.app_client_id
}
});
The problem is async await does not stop the program execution so I'm getting 'configs' as undefined. Are there anyways that I can make the app stop until the api call has resolved? Thanks.
If you want to use async/await, you have to wrap index.js in an asynchronous function and add
await getCognitoConfigs();
or you can use promise like
getCognitoConfigs().then(res => Amplify.configure({...}))