Gabb-c / pokenode-ts

A lightweight Node.js wrapper for the PokéAPI with built-in types.
https://pokenode-ts.vercel.app/
MIT License
244 stars 28 forks source link

Auto caching doesn't seem to work #847

Closed njs-guy closed 1 year ago

njs-guy commented 1 year ago

What version of pokenode-ts are you using?

1.19.1

What version of Node.js are you using?

18.12.1

What operating system are you using?

Windows

Describe the Bug

The docs say that caching is enabled by default. But no matter what I try, it never seems to save to the cache.

Expected Behavior

The Client should save the data to the browser cache.

To Reproduce

This Svelte component just makes a basic API call and logs the result.

<script lang="ts">
  import { PokemonClient } from "pokenode-ts";

  async function onClick() {
    const api = new PokemonClient({ logs: true });

    await api
      .getPokemonByName("luxray")
      .then((data) => console.log(data.name)) // will output "Luxray"
      .catch((error) => console.error(error));
  }
</script>

<main>
  <button on:click={onClick}>Press</button>
</main>

This is the console log after the button is pressed:

[ Request Config ] GET | /pokemon/luxray
index.mjs:14 [ Response ] STATUS 200 | NOT CACHED
luxray

I double checked the browser cache and sure enough, it doesn't save. I'm not sure what's gone wrong. I even copy and pasted the example from the cache page and it doesn't cache either. I also have Axios v1.4.0 and axios-cache-interceptor v1.19.1 installed in the same project.

Gabb-c commented 1 year ago

Hey @njshockey, thanks for your input!

The first request is a normal request to the pokeapi, and does not come from the cache, but will be cached by axios-cache-interceptor.

The second request against the same endpoint, will come from the cache.

image

njs-guy commented 1 year ago

It turns out that it had this behavior because I was only making one request per button click. If I put the same function in a for loop, it does give the expected behavior.

[ Request Config ] GET | /pokemon/luxray
[ Response ] STATUS 200 | NOT CACHED
luxray
[ Request Config ] GET | /pokemon/luxray
[ Response ] STATUS 200 | CACHED
luxray
[ Request Config ] GET | /pokemon/luxray
[ Response ] STATUS 200 | CACHED
luxray

If I make the same request with Axios and axios-cache-interceptor, it has the same behavior. Sorry, this was my bad. There's nothing wrong, I just misunderstood how the caching is supposed to work. Thanks for helping me figure out what was going on with this!

Gabb-c commented 1 year ago

No problem mate Happy coding!