Hi, please forgive me if my question has been asked before, I tried different ways of asking my question, but the topic suggestion didn’t give me any useful examples.
I’ve followed the Get Started documentation to get OAuth token, and have successfully used curl command to get my own user data, as well as twitchdev’s user data.
I could not find example that uses JavaScript’s fetch function, so I cooked up some codes as a proof of concepts in a React + typescript project in development mode.
Sadly, I always get 400 error from Helix API:
{error: ‘Bad Request’, status: 400, message: ‘Invalid username(s), email(s), or ID(s). Bad Identifiers.’}
I know the type assertion functions works because I had adopted it from a book I’ve been learning from, and the codes had been tested to work with a local mock database filled with curl call responses gotten from Helix/users.
With my limited experience and knowledge I cannot figure out why when the fetch calls to Twitch’s Helix API, the codes cannot yield the data I had hoped to receive. Could you please kindly help me out spotting my errors?
In a getUsers function:
async function getUsers() {
const params = new URLSearchParams();
params.append('login', 'twitchdev');
const response = await fetch(`https://api.twitch.tv/helix/users?${params})`, {
headers: {
authorization: 'Bearer <removed>',
'client-id': '<my own client id>',
},
});
const body = (await response.json()) as unknown;
console.log(body);
assertIsUsers(body); //This is just making sure the body is of expect shape, and it worked with API responses that were stored locally in my development setup
return body;
}
Am I doing something horrendously wrong?
I have observed the example from Reference | Twitch Developers,
And I think the fetch call’s first parameter is okay to the best of my understanding.
Any helps would be much appreciated, as my end goal is to have a simple react web app that runs locally, so that I can have a list of user name, profile pics, and their channel description in a simple one page React app.