fetchPolicy ={'network-only'} in a <Query>/useQuery returns cached values and not remote data

[amineDaouma]

As a user, I want to cancel changes made on a dashboard like (add or remove a widget from dashboard).

Intended outcome:

When I remove a widget from a dashboard and cancel changes this "removed widget" should be visible again on the dashboard. To do so, I set fetchPolicy to network-only to fetch remote server data and display them on the dashboard

Actual outcome:

A request is made to the server and the data is returned but apollo does not read this remote data . Instead, Apollo Client reads the cached data (read dashboard from the cache instead).

How to reproduce the issue:

export const GET_DASHBOARD_GRID = gql`
  query Dashboard($dashboardId: Int!) {
    dashboard(id: $dashboardId) {
    id
    name
    active
    order
    widgetplacementSet {
      id
      xpos
      ypos
      height
      width
     }
     dashboard {
        id
        name
     }
  }
`;

export const GET_NEW_CACHED_DASHBOARD_GRID = gql`
  query NewCachedDashboard($dashboardId: Int!) {
    newCachedDashboard(id: $dashboardId) @client {
      id
      name
      active
      order
      widgetplacementSet {
        id
        xpos
        ypos
        height
        width
     }
       dashboard {
          id
          name
     }
  }
`;

     <Query
          query={
            this.state.creating
              ? GET_NEW_CACHED_DASHBOARD_GRID
              : GET_DASHBOARD_GRID
          }
          fetchPolicy={
            this.state.isCanceled || this.state.isSaved
              ? 'network-only'
              : 'cache-first'
          }
          variables={{ dashboardId: this.state.id }}
          onCompleted={result => {
            const dashboard = this.state.creating
              ? result.newCachedDashboard
              : result.dashboard;
         .... >

Here, when

this.state.isCanceled is true

then :

fetchPolicy={'network-only'} is selected

therefore, Apollo Client makes a request to the server to fetch dashboard data (return to the initial state of dashboard before the made changes on dashboard). The surprise :

result

variable in onCompleted option does not return the server data but only the cached data although the request was made and returns the server data correctly. As if Apollo Client v3 does not allow to display this remote data and only read data from the cache ... I don't know why

Versions

System: OS: Linux 3.10 CentOS Linux 7 (Core) Binaries: Node: 12.18.3 - /usr/local/bin/node Yarn: 1.22.4 - /usr/bin/yarn npm: 6.14.6 - /usr/local/bin/npm

 "dependencies": {
    "@apollo/client": "^3.2.0",
    "antd": "3.26.12",
    "apollo-link-timeout": "^1.4.1",
    "bfj": "6.1.1",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "faker": "4.1.0",
    "fs-extra": "7.0.1",
    "graphql": "^15.3.0",
    "graphql-tag": "2.10.1",
    "graphql-tools": "4.0.5",
    "graphql-type-json": "0.3.0",
    "lodash": "4.17.15",
    "react": "16.10.1",

  },

[amineDaouma]

@hwillson @benjamn Can you help me with that issue ?
Thanks

[magicmark]

I think this might be similar to #7045 (comment)?

[amineDaouma]

@benjamn Do you have any suggestion please, I'm still stuck with this issue .. Thanks

[bignimbus]

Hi all! I believe this was resolved in #7978, please let me know if you experience this with an updated version of the client and we can re-open. Thank you! 🙏🏻