I am new to react-query and appreciate the way it caches the api response. I am just curious , is there an out-of-the-box way to cache a formatted version (more suitable to frontend) of api response than the response itself?
We use to do that in react-redux where we can cache something in store in a specific format so that interested react components can read that formatted value.
Any clues?
you can return whatever promise you want from the queryFn - it doesn't have to be the exact api response. Transformations can be done, too.
I've done an extensive write-up on this topic: https://tkdodo.eu/blog/react-query-data-transformations
Related
We are calling a payment gateway api and that vendor is sending response with some POST method. Our UI is build in react which is not able to consume that data. How can I do that?
Assuming this is CCAvenue, you will need a server to take that response and redirect you back to React with the necessary details.
If I get your question right, here it's better if they send it using GET. If you want to consume the data then this is the right way.
I try to understand how could i override default behavior of React Query if for example i made reguest (query or mutation ) => and it recieved 401 Unathorization. I understand that i need to send request to get new access token based on my refresh token which i already have in my localstorage.
I could trigger it every time just write logic if onError and then try request once again with new accessToken.
But my app have more than 1000+ requests that i need to add this logic. And i wonder how i can make it in one place by default. Probably in Middleware or something like this (I'm new in React). Please share any kind of suitable solution.
Thank you in advance
The recommended approach right now is to not couple this logic with react-query, but with the actual library that does the data fetching for you. If you use for example axios - it offers interceptors. There are also some good suggestions in this discussion about async retries.
I'm working on a project with .net-core backend and react/react-native for frontend/mobile. On frontend we use axios for api client. The problem we've got was with HTTP GET method. We wanted to send GET with data in body instead of URL params as it was easier to parse it in backend, but for some reason axios was having problem with dealing with it this way. Now our current solution is to use PATCH instead of GET and want to ask if it is a good/acceptable practice - and if not, what would be the best workaround for this problem?
I am working on an Ionic phone app using AngualrJs as the framework. Now I faced an issue. I don't want my app to send an HTTP request to my backend(which use Ruby on Rails) API to do a manual test.
So I'm wondering what's the best practice to pass a mock JSON data as a response when I want to call the API.
I'm not familiar with Angular and Ionic, I can find some tutorials on both sides but I don't know what's is the best practice if use them together.
You can either store the data in localStorage after the first hit and read the data from localStorage every-time whenever you need.
https://medium.com/#petehouston/awesome-local-storage-for-ionic-with-ngstorage-c11c0284d658
Or you can use
$httpBackend
https://docs.angularjs.org/api/ngMock/service/$httpBackend
by saving json files locally and injecting them back when the application tries to hit the network . One limitation here, you cannot update the json file later after the user have installed the application.
So, localStorage is preferred if you want to cache the data you have received from network.
I am quite new to relay , My idea is to make a 3rd party API call , which returns a JSON object. for example you can consider this URL as an API call which returns a simple JSON. "http://ip.jsontest.com/". How Do I go about with the react Relay design
It depends..
From server?
Just write a graphQL schema as usual but instead of a database request, make an 3rd party API call and use schema resolvers if data structure requires it. You might want to add a caching layer if data isn't extremely dynamic because 3rd party API calls might be slow (not a rule of thumb).
Now you can get the data via Relay Containers as usual. Relay also handles client-side caching!
From client?
There really isn't Relay design for that because Relay is currently only a glue between graphQL and React. It might change with v2. Do as you wish, for example, use a regular function or React method:
getMyData() {
// ajax call or fetch()
}
Downside to this is that if you need to reuse that data, client-side caching is your job. Use either Flux / Redux, store it in global variable (not a good practice) or in storages (indexedDB, localStorage etc).