urqlのPersisted QueriesでメソッドがGETにならなかった

経緯

バックエンドをNestJS(Fastify互換)、フロントエンドをNext.js(App Router)で開発しており、GraphQLのPersisted Queriesを利用するにあたってフロントエンドにurqlを導入した
その際に、公式に書いてあった方法で設定を試みたがリクエストを送る際にPersisted Queriesが有効にならなかった

バージョン等

"@urql/core": "^4.1.1",
"@urql/exchange-persisted": "^4.1.0",
"@urql/next": "^1.0.0",
"graphql": "^16.7.1",
"next": "13.4.7",
"urql": "^4.0.5"

やったこと

GraphQL自体の導入は終わっていたので、Persisted Queries導入のため以下のようにpersistedExchangeを設定に追記したが、Persisted Queries導入前と挙動が変わらなかった

createClient({
    url: 'http://localhost:8080/graphql', // 例
    exchanges: [
      cacheExchange,
      fetchExchange,

      // ↓のpersistedExchangeを追記した
      persistedExchange({
        preferGetForPersistedQueries: true
      })
    ]
})

結論

urqlのexchangeは記述する順番を間違うと動かない
今回だとfetchExchangeをpersistedExchangeの後に記述することで無事にPersisted Queriesが有効化された
詳細はこちらの記事が参考になった

完成形のコードは以下

createClient({
    url: 'http://localhost:8080/graphql', // 例
    exchanges: [
      cacheExchange,

      // ↓のpersistedExchangeを追記した
      persistedExchange({
        preferGetForPersistedQueries: true
      }),
      fetchExchange // fetchExchangeをpersistedExchangeの後に記述
    ]
})