I am building an app in react native which makes fetch calls that rely on the most up to date information from the server. I have noticed that it seems to cache the response and if i run that fetch call again it returns the cached response rather than the new information from my server.
My function is as follows:
goToAll() {
AsyncStorage.getItem('FBId')
.then((value) => {
api.loadCurrentUser(value)
.then((res) => {
api.loadContent(res['RegisteredUser']['id'])
.then((res2) => {
console.log(res2);
this.props.navigator.push({
component: ContentList,
title: 'All',
passProps: {
content: res2,
user: res['RegisteredUser']['id']
}
})
});
});
})
.catch((error) => {console.log(error);})
.done();
}
and the function from api.js im calling is as follows:
loadContent(userid){
let url = `http://####.com/api/loadContent?User_id=${userid}`;
return fetch(url).then((response) => response.json());
}
You can set a Header to prevent the request from being cached.
Example below:
return fetch(url, {
headers: {
'Cache-Control': 'no-cache'
}
}).then(function (res) {
return res.json();
}).catch(function(error) {
console.warn('Request Failed: ', error);
});
Manosim's answer didn't work for me, but put me on the path to a solution that did work:
fetch(url, {
headers: {
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Pragma': 'no-cache',
'Expires': 0
}
})
This nailed it.
I had a similar problem with react native (Android) and fetch using clojurescript (instead of js).
Adding :cache "no-store" (not in the header) stopped the behavior (caching fetch data on Android App).
I think the code in js should be something like:
fetch(url, {'cache':'no-store'})
specs fetch cache-mode
Related
I am migrating a project from Webpack to Vite and have run into an issue with proxying requests to one of the endpoints in the MVC.Net backend.
Due to circumstances of the existing project, I need to handle certain calls manually - such as on initial page load of login page, check whether user is already authenticated and redirect to the main page.
I am trying to figure out how to use server.proxy.configure to handle these requests. I am managing fine with the GET requests, but I cannot seem to receive the POST request's body data.
Here is what I have at the moment:
server: {
proxy: {
"/api": {
target: "https://my.local.environment/",
changeOrigin: true,
configure: (proxy: HttpProxy.Server, options: ProxyOptions) => {
proxy.on("proxyReq", (proxyReq, req, res, options) => {
if (req.method === "GET") {
//handle simple get requests. no problems here
//...
} else {
const buffer = [];
console.log("received post request");
proxyReq.on("data", (chunk) => {
console.log("received chunk");
buffer.push(chunk);
});
proxyReq.on("end", () => {
console.log("post request completed");
const body = Buffer.concat(buffer).toString();
const forwardReq = http.request(
{
host: "https://my.local.environment",
port: 443,
method: "POST",
path: req.url,
headers: {
"Content-Type": "application/json",
"Content-Length": data.length,
},
},
(result) => {
result.on("data", (d) => {
res.write(d);
res.end();
});
}
);
forwardReq.on("error", (error) => {
console.log(error);
});
forwardReq.write(data);
forwardReq.end();
});
}
});
},
secure: false,
},
}
}
The problem is that neither proxyReq.on("data", (chunk) => { nor proxyReq.on("end", (chunk) => { ever actually trigger.
Additionally, req.body is undefined.
I have absolutely no idea where I am supposed to be getting the POST request's body.
I ended up finding a different question about the bypass option and this gave me the solution I was looking for. Ended up only handling the specific GET requests that I need to handle locally instead of forwarding to my deployed environment, and everything else gets handled automatically by vite.
"/api": {
target: "https://my.local.environment/",
changeOrigin: true,
agent: new https.Agent({
keepAlive: true,
}),
bypass(req, res, proxyOptions) {
if (req.method === "GET") {
//... here I get what I need and write to the res object
// and of course call res.end()
}
//all other calls are handled automatically
},
secure: false,
},
Problem
I have a Cypress command where I can login with a random user. The API will return the following response:
{
user: { ... }
token: { ... }
}
What I would like to do is to:
Create user using cy.request
Set the cookie in the browser
Return the response out of the command so that I can work with it outside of the command
What I have tried
return cy.request({
method: 'POST',
url: getApiUrl('__cypress__/login'),
body: requestBody,
log: false,
})
.then(({ body }) => {
cy
.setCookie('_token', body.token.plainTextToken)
.then(() => {
Cypress.log({
name: 'login',
message: JSON.stringify(body),
consoleProps: () => ({ user: body }),
});
});
})
.its('body', { log: false }) 👈 times out here
What I'm looking for is to do something like:
cy.login().then(({ user }) => {
// use logged in user
})
Question
Cypress times out on .its(...) line. Is this possible to do it? Looking at the docs I couldn't find any example on what I'm trying to achieve
(from the comments)
It happens because previously chained subject, does not return anything. An explicit return for the body property will fix it.
I am facing a timeout issue with nestJs Httpservice.
The error number is -60 and error code is 'ETIMEDOUT'.
I am basically trying to call one api after the previous one is successfully.
Here is the first api
getUaaToken(): Observable<any> {
//uaaUrlForClient is defined
return this.httpService
.post(
uaaUrlForClient,
{ withCredentials: true },
{
auth: {
username: this.configService.get('AUTH_USERNAME'),
password: this.configService.get('AUTH_PASSWORD'),
},
},
)
.pipe(
map((axiosResponse: AxiosResponse) => {
console.log(axiosResponse);
return this.getJwtToken(axiosResponse.data.access_token).subscribe();
}),
catchError((err) => {
throw new UnauthorizedException('failed to login to uaa');
}),
);
}
Here is the second api
getJwtToken(uaaToken: string): Observable<any> {
console.log('inside jwt method', uaaToken);
const jwtSignInUrl = `${awsBaseUrl}/api/v1/auth`;
return this.httpService
.post(
jwtSignInUrl,
{ token: uaaToken },
{
headers: {
'Access-Control-Allow-Origin': '*',
'Content-type': 'Application/json',
},
},
)
.pipe(
map((axiosResponse: AxiosResponse) => {
console.log('SUCUSUCSCUSS', axiosResponse);
return axiosResponse.data;
}),
catchError((err) => {
console.log('ERRRORRRORROR', err);
// return err;
throw new UnauthorizedException('failed to login for');
}),
);
}
Both files are in the same service file. Strangely, when i call the second api through the controller like below. It works fine
#Post('/signin')
#Grafana('Get JWT', '[POST] /v1/api/auth')
signin(#Body() tokenBody: { token: string }) {
return this.authService.getJwtToken(tokenBody.token);
}
When the two api's are called, however, the first one works, the second one that is chained is giving me the timeout issue.
Any ideas?
Two things that made it work: changed the http proxy settings and used switchMap.
I am using next js as a front-end and laravel as a back-end. and i want to call back-end (laravel) api from getServerSideProps() method. as shown below
export async function getServerSideProps(context) {
const response = await Axios.request({
url: 'http://localhost:8000/api/event',
method: 'get',
headers: {
Cookie: context.req.headers.cookie,
},
})
const events = response.events
console.log(response)
return {
props: { events },
}
}
so i have also set the cookie but i am getting response with message unauthenticated like below
I just wanted to say a huge THANK YOU to Riaz Kahn for his answer. After a lot of banging my face against a wall this was the answer. I'm going to post a working example of my getServerSideProps function for anyone arriving here in the future. The getUser({[configObject]}) function is just returning a promise from an axios.get('my-user/route', config) call. This is working properly in a Next 13 app using standard pages functionality (not using experimental app directory).
export const getServerSideProps = async (context: any) => {
const {req, res} = context;
try {
const {data: user} = await getUser({
headers: {...req.headers}
});
return {
props: {
fallback: {user}
}
}
} catch (e) {
res.writeHead(302, {Location: '/login'});
res.end();
}
}
I have some apis which give very slow response in internet explore. I am fetching apis using cross-fetch in reactjs.
I have tried
1) Cache Buster in my request.
var myRequestURL = '/get/somefunction?buster='+new Date().getTime();
2) By adding header cache-control.
HttpContext.Current.Response.AddHeader("Cache-Control","no-cache,no-store")
3) By adding header
Pragma: "no-cache"
import fetch from "cross-fetch";
const { Promise } = require("es6-promise");
const API_URL = "API URL";
export default (endpoint, method = "get", body) =>
fetch(`${API_URL}${endpoint}`, {
headers: { Pragma: "no-cache" },
method,
body: JSON.stringify(body)
})
.then(response => response.json().then(json => ({ json, response })))
.then(({ json, response }) => {
if (!response.ok) {
return Promise.reject(json);
}
return json;
})
.then(response => response, error => error);
I am expecting fast response in IE like chrome browser.