How to fixed 429 (Too Many Requests)?

Question

I am creating a custom hook in React for fetching jobs from GitHub jobs API. But CORS creating problems.So I also use const BASE_URL = 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json'; This throwing error 429 (Too Many Requests). I do not use any backend. This hook will be called once from app.js while loading application.

useFetchJobs.js

import { useReducer, useEffect } from 'react';
import axios from 'axios';

const ACTIONS = {
    MAKE_REQUEST: 'make-request',
    GET_DATA: 'get-data',
    ERROR: 'error'
}

const BASE_URL = 'https://jobs.github.com/positions.json';

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.MAKE_REQUEST:
            return { jobs: [], loading: true }
        case ACTIONS.GET_DATA:
            return { ...state, jobs: action.payload.jobs, loading: false }
        case ACTIONS.ERROR:
            return { ...state, jobs: [], loading: false , error: action.payload.error }
        default:
            return state;
    }
}

export default function useFetchJobs(params, page) {
    const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true });

    useEffect(() => {
        dispatch({ type: ACTIONS.MAKE_REQUEST });
        axios.get(BASE_URL, {
            params: { markdown: true, page: page, ...params }
        }).then(res => {
            dispatch({ type: ACTIONS.GET_DATA, payload: { jobs: res.data }});
        }).catch(e => {
            dispatch({ type: ACTIONS.ERROR, payload: { error: e }});
        })
    }, [params, page]);

    return state;
};

App.js

import React from 'react';

import useFetchJobs from "./useFetchJobs";

import Container from "react-bootstrap/Container";

const App = () => {
  const { jobs, loading, error } = useFetchJobs();
  return (
    <Container>
      {loading && <h1>Loading...</h1>}
      {error && <h1>Error. Please try again...</h1>}
      <h1>{jobs.length}</h1>
    </Container>
  );
}

export default App;

Solution 1

It is maybe problem of cors-anywhere.herokuapp.com and not your application.

Solution 2

I have done the same tutorial that your code is based on and I fixed it by using local-cors-proxy. Just follow their documentation and you should be good to go.

Using https://api.allorigins.win/raw?url= worked for me as well, but somehow it broke ReactMarkdown, so the job detail's markdown was not parsed anymore for some reason.

Many people are using cors-anywhere, which is probably why it sends Too many requests all the time. I guess its better to rely on an own proxy in this case.

Comments

[StefanN]

Does this answer your question? React - Axios call make too many requests

[MD Jahid Hasan]

No, after passing empty array getting 429 (Too Many Requests)

[Deep Kumar Singh]

Probably the params or page is changing every time when rendering takes place which make the useEffect methods to run again and it is causing a infinite loop.

[MD Jahid Hasan]

If I pass empty params or page also this happed error 429

[fesieg]

It seems like your UseEffect is "listening" to the params and page states. Try listening to setParams and setPage instead, if you use those. It's much easier to control when these are called as opposed to pure state

[Charles-Hébert Dalzon]

you should put escapeHtml={false} in the ReactMarkdown component