Problem with offlineExchange causing queries to "vanish" when executed. Can someone sanity check me?

[JohnAtFenestra]

I've reduced this to a simple test case. First, I'm using Vue (Quasar framework) so I'm writing the code using the basic API. My simplified code is below. The query in question (one simple example) is:

const query = `
query SuperPing($action: ActionKind) {
  Ping1: ping(action: $action) {
    ...on PingStringResult {
      value
    }
    ...on PingListResult {
      list
    }
    ...on ErrorResult {
      message
    }
  }
  Ping2: ping(action: LAST) {
    ...on PingStringResult {
      value
    }
    ...on PingListResult {
      list
    }
    ...on ErrorResult {
      message
    }
  }
}
`

export async function runSuperPingQuery(action = "ALL") {
  const result = await client.query(query, {action}).toPromise()
  return result;
}

The issue I'm running into is this, if I remove cache from the list of exchanges, the query executes. If I add cache into the list of exchanges in the order below (which is from the documentation), nothing happens. I traced to executeQuery single stepping but haven't tried to dig much deeper yet.

When I say nothing, I mean, no errors or messages in the console and no network activity. It's as if the query dropped off the face of the earth.

My client generator:

import awsconfig from "src/config/local-awsconfiguration.json"
import {
  createClient,
  dedupExchange,
  fetchExchange
} from "urql"
import { makeLocalStorage } from "./storage"
import { offlineExchange } from "@urql/exchange-graphcache"
import schema from "./schema.json"
import { offlineSupport } from "./query-support"

// Using this didn't make any difference
// import { makeDefaultStorage } from "@urql/exchange-graphcache/default-storage"

const storage = makeLocalStorage()

function debugCreateClient2() {
  const cache = offlineExchange({
    schema,
    storage
  })

  const client = createClient({
    url: awsconfig.AppSync.Default.ApiUrl,
    exchanges: [dedupExchange, cache, fetchExchange]
  })

  return client
}

const client = debugCreateClient2()

export { client, storage }

storage uses the implementation in the documentation

export function makeLocalStorage() {
  const cache = {}
  return {
    writeData(delta) {
      console.log("writeData", delta)
      return Promise.resolve().then(() => {
        Object.assign(cache, delta)
        localStorage.setItem("data", JSON.stringify(cache))
      })
    },
    readData() {
      return Promise.resolve().then(() => {
        const local = localStorage.getItem("data") || null
        Object.assign(cache, JSON.parse(local))
        console.log("readData", cache)
        return cache
      })
    },
    writeMetadata(data) {
      console.log("writeMetadata", data)
      localStorage.setItem("metadata", JSON.stringify(data))
    },
    readMetadata() {
      return Promise.resolve().then(() => {
        const metadataJson = localStorage.getItem("metadata") || null
        const data = JSON.parse(metadataJson)
        console.log("writeMetadata", data)
        return data
      })
    },
    onOnline(cb) {
      window.addEventListener("online", () => {
        cb()
      })
    }
  }
}

Schema is very simple and is running in a local GraphQL server:

const typeDefs = `
enum ActionKind {
  LAST
  ALL
  HANDLED_ERROR
  UNHANDLED_ERROR
}

type PingListResult {
  list: [String]
}

type PingStringResult {
  value: String
}

type PongIntResult {
  count: Int
}

union QueryResult = PingStringResult | PingListResult | ErrorResult
union MutationResult = PongIntResult | ErrorResult

type ErrorResult {
  message: String
}

type Mutation {
  pong(message: String!): MutationResult
}

type Query {
  ping(action: ActionKind): QueryResult
}

type PongAction {
  message: String
}

type Subscription {
  ponged: PongAction
}
`;

I swear I had this running in offline mode last week, but this week I have been stopped cold. Can somebody give me an idea of where I did something bonehead wrong?

[JoviDeCroock]

We'll probably need to know the versions of the libraries you're using we had a similar issue earlier this week but upated graphCache for this reason.

[JohnAtFenestra]

Thanks Jovi. Library versions:

├─ @urql/core@1.13.0
├─ @urql/devtools@2.0.2
├─ @urql/exchange-graphcache@3.1.1
└─ @urql/introspection@0.1.0

[JoviDeCroock]

Yeah it was fixed in 3.1.3 normally, this in turn has a dependency on @urql/core v1.13.1, mind trying that for me?

[JohnAtFenestra]

Sure. I'll update and let you know the results.

Really appreciate the response!

[JohnAtFenestra]

Yes! The query now works.