Limit & offset not working on ListPokemon API using React Native
minh-hd opened this issue ยท 9 comments
What version of pokenode-ts are you using?
1.19.0
What version of Node.js are you using?
18.15.0
What operating system are you using?
macOS 13.3.1
Describe the Bug
I used ListPokemon()
API using PokemonClient and it worked well without parameters. But when I passed in 2 params which are limit
and offset
, the result was exactly the same. And I found out that the problem only occurs when I use with React Native. It sent out a request looks like this:
Here is the cURL that is created from the captured request:
curl -H "accept:application/json, text/plain, */*" -H "cache-control:no-cache" -H "pragma:no-cache" -H "expires:0" https://pokeapi.co/api/v2/pokemon?_searchParams%5B0%5D%5B0%5D=offset&_searchParams%5B0%5D%5B1%5D=80&_searchParams%5B1%5D%5B0%5D=limit&_searchParams%5B1%5D%5B1%5D=40
Expected Behavior
It should return a new list of pokemon with new offset and new limit
To Reproduce
- Initialize a react native project with this instruction
- Install this dependency following the instructions in
README.md
- Using the pokemon client as below:
const pokemonApi = new PokemonClient();
const pokemonList = pokemonApi.listPokemons(20, 20);
Seems like there's a problem in my react native client
I tried create a vanilla Node.js project and used it and the dependency worked perfectly.
The problem might be axios-cache-interceptor
is unable to invalidate the cache.
pokenode-ts
constructs a URLSearchParams
for { offset, limit }
and URLSearchParams
is interpreted differently on different environments (i.e: Node, Browsers etc...)
On the browser, URLSearchParams
, specifically for { offset, limit }
, is always an object with the value { size: 2 }
(because there are 2 params offset
and limit
). Here's what I have to configure for cacheOptions
to make listPokemons
work on the browser
const cacheOptions = {
generateKey: buildKeyGenerator((request) => {
if (request.params) {
return {
method: request.method,
url: request.url,
params: request.params.toString(),
};
}
return defaultKeyGenerator(request);
}),
};
@nartc
I'm seeing that adding the URLSearchParams caused this issue. Maybe if we rollback this, the issue would be fixed.
I reverted the usage of URLSearchParams and created a fn that builds the list url with the request params:
/**
* List Pokemons
* @param offset The first item that you will get
* @param limit How many Pokemons Stats per page
* @returns A list of Pokemons
*/
public async listPokemons(offset?: number, limit?: number): Promise<NamedAPIResourceList> {
return new Promise<NamedAPIResourceList>((resolve, reject) => {
const url = getListURL(Endpoints.POKEMON, offset, limit);
this.api
.get<NamedAPIResourceList>(url)
.then((response: AxiosResponse<NamedAPIResourceList>) => resolve(response.data))
.catch((error: AxiosError<string>) => reject(error));
});
}
export const getListURL = (endpoint: Endpoints, offset?: number, limit?: number): string => {
return `${endpoint}?offset=${offset ?? 0}&limit=${limit ?? 20}`;
};
I'll give this a try asap. Thanks Gabriel