CODEWITHSUNDEEP
reactjsnode.jssteam-web-api
Zaweb
Zaweb

Reputation: 1

API returns 429 error when fetched but works everywhere else

So I am trying to fetch data from https://steamcommunity.com/inventory/<USER_ID>/730/2?l=english&count=2000 USER_ID is replaced with a valid id but for privacy I removed it.

This is what my fetch request looks like in react and using axios:

InputField.tsx

import { useState } from 'react'
import style from './inputField.module.scss'
import { SearchIcon } from '../SearchIcon/SearchIcon';
import { ErrorMsg } from '../ErrorMsg/ErrorMsg';
import useAxios from '../../customHooks/useAxios';

export const InputField = () => {
  const [accountId, setAccountId] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [errorStatus, setErrorStatus] = useState(0);

  const err = {borderBottom: '2px solid red'};

  const handleSubmit = (event: any) => {
    event.preventDefault();

    if (!accountId) {
      setError('NO_INPUT');
      return
    }

    setIsLoading(true);
    
    useAxios(accountId)
    .then(result => {
      setIsLoading(false)
    })
    .catch(err => {
      console.log(err)
      setErrorStatus(err.status);
      setError(err.code);
      setIsLoading(false)
    });

  }

  return (
    <div className={style.formWrapper}>
      <form onSubmit={handleSubmit} className={style.form}>
        <input
        style={error ? err : {}}
        className={style.input}
        value={accountId}
        onChange={e => setAccountId(e.target.value)}
        onClick={e => setError('')}
        placeholder='Steam account ID'
        />
        <button>
          <SearchIcon fill='#e0e0e0' />
        </button>
      </form>
      {error && <ErrorMsg status={errorStatus} message={error} />}
    </div>
  )
}

useAxios.tsx

import axios from 'axios'

const useAxios = (id: string) => {

  axios.get(`https://steamcommunity.com/inventory/${id}/730/2?l=english&count=2000`)
  .then(result => {
    console.log(result)
  })
  .catch(err => {
    console.log(err)
  })

  
}

export default useAxios;

server.ts

import { Request, Response } from "express";
import axios from 'axios';
import cors from 'cors';

import express from 'express';

const app = express()

app.use(cors())

const PORT = 3001;

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);

  app.get('/api/getGameInventory/', (req: Request, res: Response) => {

    axios.get(`https://steamcommunity.com/inventory/${req.query['id']}/730/2?l=english&count=2000`,
    {
      headers: {
        withCredentials: true,
      }
    })
    .then(result => {
      res.send(result.data)
    })
    .catch(err => {
      res.status(err.response.status).send({
        message: err
      })
    })

  })

});

I am confused as to why when I call the endpoint I recieve 429 error even if the difference between each call is 30min. Postman too returns 429 error. I tried a online api tester and every one of those works fine and returns data without problem, and when I go to the endpoint in my browser I see data aswell.

I would really appreciate help with this problem and sorry if the question is bad Its my first time posting.

Upvotes: 0

Views: 496

Answers (1)

iDurocher
iDurocher

Reputation: 915

You may need to post more of your code to show how you are using this in React, which can easily fire extra requests if not done properly. Also, since this is working fine from a browser, I am guessing that possibly this API needs authentication and the browser may be passing that via cookies which your code above is not doing and postman would not as well. To pass cookies, you need to do something like this:

axios .get( https://steamcommunity.com/inventory/${id}/730/2?l=english&count=2000, { withCredentials: true } )

Upvotes: 1

Related Questions