synvox / api Goto Github PK

If I send an object with a property that is an empty array, this property gets removed from the request and not sent to the server.

This is unexpected and breaks a functionality where you would send an empty array to, for example, reset some property on the server.

Sending an empty string, empty object, or null value seems to work instead.

For a reproduction you can see: https://codesandbox.io/s/axios-empty-array-bug-w4yhd?file=/src/index.js

Hi! Love this library and the approach!

Upon playing with it, I encountered some problems whereas other HTTP methods like POST, PUT and DELETE are not working and considered as a GET request.

  const pokemonDetails = api.pokemon.details.post({
    a: 1,
    b: 2
  });

See this codesandbox:
https://codesandbox.io/s/hopeful-minsky-w4mb4

This is my situation:

In my Create React App I have one page with the a list of form submissions, and a second page with the form itself. Plus a home page.
They are under different React Router routes.

/              # The home page
/submit-visit  # Contains the form to send a new submission
/visits        # Displays a table with the list of submissions

When I open the app on /visits a request is sent ( const visits = api.visits(params);), a spinner shows up (thanks to Suspense), and a little later the submissions fill my table. Here is a pseudocode for the page /visits:

const Visits = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <List />
    </Suspense>
  );
}

const List = () => {
  const api = useApi();

  // This logs every time I navigate to /visits, so I know for sure that this component
  // is being re-rendered. But only on the first navigation is /api/visits actually called.
  console.log('fetching'); 

  const visits = api.visits();

  return (
    <ul>
      {visits.data.map(visit => <li>{visit.id} {visit.title}</li>)}
    </ul>
  );
}

Now, when the user navigates to /submit-visit and fills and sends the form, upon success he/she is redirected to /visits. But they still see the stale list, no new network request is sent.

What I think happens here is that api sees that I've already called GET /api/visits, reads the cache, and gives me a stale list of submissions. I have to reload the page using the browser button to get the freshly sent form.

How can I force api to refresh even if the request is in the cache?
Maybe touch is what I need? But I can't figure out where I'm supposed to call it... If I call it right after api.visits() am I going to fetch the same route twice on app load?

I'm leaving this here just in case it saves some time to others, not because I expect a fix.

This library makes use of Proxy, which is supported only starting with Edge 12, and is basically non-polyfillable in IE11.

I had a quick look at the source code and it looks like the whole API of this library depends on Proxy. If the author were to make it compatible he would have to basically re-write the whole thing and it wouldn't work the way it works now anyway.