synvox / api Goto Github PK
View Code? Open in Web Editor NEWSimple data loading for React
Home Page: https://www.npmjs.com/package/@synvox/api
License: MIT License
Simple data loading for React
Home Page: https://www.npmjs.com/package/@synvox/api
License: MIT License
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?
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
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.