Caching request even with different http method (using fetch)

[jpolack]

Is this a bug report?

Yes

Environment

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.45.1
2. node -v: 8.4.0
3. npm -v: 5.3.0

Then, specify:

• Target Platform: iOS 10.3.3 (iPhone 6)

• Development Operating System: macOS 10.12.6

• Build tools: XCode 8.3.3

Steps to Reproduce

1. use your hardware phone and mobile internet (no wifi) since there seem to be special caching rules for "no wifi calls" and I was only able to repoduce it without wifi
2. start an API call with fetch and a certain HTTP Method (f.e. POST) to a certain URL
3. start another API call with fetch and a different HTTP Method (f.e. GET) to the same URL

Expected Behavior

I would expect to receive two different reponses.

For example:
POST "https://yourapi.com" => "foo"
GET "https://yourapi.com" => "bar" (not cached, because the HTTP method is different)
GET "https://yourapi.com" => "bar" (cached, because the HTTP method and the URL was already called)

Actual Behavior

To follow the example above I received following responses:

POST "https://yourapi.com" => "foo"
GET "https://yourapi.com" => "foo" (cached, even though the call to that URL was a POST)
GET "https://yourapi.com" => "foo" (cached)

I ensured that the response was cached by watching the webserver's logs and seeing that the request did not reach the server, but got a response.

For more information see the stackoverflow thread I opened for that error https://stackoverflow.com/questions/45706114/react-native-fetch-different-result-with-without-wifi

Reproducible Demo

I wrote a small demo project to be sure that my main project is not the problem.

I simply added some lines. I am aware that the style is not the style promises should be used, I just wanted to be sure that there are no side-effects:

fetch("https://yoururl", {
    method: "GET",
})
.then(res1 => res1.json())
.then(res1 => {
    console.log("First GET:", res1);
    fetch("https://yoururl", {
        method: "POST",
        body: JSON.stringify({"foo": "bar"})
    })
    .then(res2 => res2.json())
    .then(res2 => {
        console.log("POST:", res2);
        fetch("https://yoururl", {
            method: "GET"
        })
        .then(res3 => res3.json())
        .then(res3 => {
            console.log("Second GET:", res3);
        }).catch(e => {
            console.error(e)
        });
    }).catch(e => {
        console.error(e)
    });
}).catch(e => {
    console.error(e)
});

I would expect: res1 == res3 && res1 != res2 && res3!= res2

But it is: res1 != res3 && res1 != res2 && res3== res2

Please be sure to test it with your hardware device and without wifi, because I only repoduced it like this.

Since the API is not open I can not give you examplecode here.
But in node it would be something like:

const express = require("express")

var app = express()

app.get("/", function (req, res) {
    res.send({"foo": true})
})


app.post("/", function (req, res) {
    res.send({"bar": false})
})

app.listen(3000)

I could not try this code out since i was not able to make it accessible, but it should to the same job.

Thank you very much

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.