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;

Does this answer your question? [React - Axios call make too many requests](https://stackoverflow.com/questions/58122417/react-axios-call-make-too-many-requests) — StefanN, Jul 21 '20 at 08:07
No, after passing empty array getting 429 (Too Many Requests) — MD Jahid Hasan, Jul 21 '20 at 08:14
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. — Deep Kumar Singh, Jul 21 '20 at 08:14
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 — fesieg, Jul 21 '20 at 08:40

score 1 · Answer 1 · answered Jul 24 '20 at 11:55

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.

you should put escapeHtml={false} in the ReactMarkdown component — Charles-Hébert Dalzon, Jul 31 '20 at 22:22

score 1 · Accepted Answer · edited Sep 10 '20 at 09:45

1

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

edited Sep 10 '20 at 09:45

r4ccoon

3,056
4
26
32

answered Sep 10 '20 at 06:25

Ghost420

50
8

score 0 · Answer 3 · answered Jul 22 '20 at 06:24

0

Using https://api.allorigins.win/raw?url= before the url fixes the issue. Cors anywhere seem to have a problem. Here is the documentation: https://allorigins.win/

answered Jul 22 '20 at 06:24

Stainly Stewart

78
1
7

How to fixed 429 (Too Many Requests)?

useFetchJobs.js

App.js

3 Answers3