SSL error on querying https localhost: ERR_SSL_WRONG_VERSION_NUMBER

[djkato]

Trying to query an endpoint which enforces ssl on locahost:8000 (or 0.0.0.0:8000, or 127.0.0.1:8000) causes urql to error:

cause: [Error: 0088E6AB85140000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:354:
      ] {
        library: 'SSL routines',
        reason: 'wrong version number',
        code: 'ERR_SSL_WRONG_VERSION_NUMBER'
      }
    },

This request appears like so on my Saleor api endpoint: api_1 | [2024-02-02 10:59:27 +0000] [25] [WARNING] Invalid HTTP request received.

I'm using Astrojs + urql/core.
I have a nanostore for my urql client, which I initialise like so:
connect.ts

export function connect(options?: { api_url?: string, token?: Token }): Client {
  const client = new Client({
    url: options?.api_url || import.meta.env.PUBLIC_GRAPHQL_URL,
    exchanges: [cacheExchange, fetchExchange, retryExchange({ initialDelayMs: 100, maxNumberAttempts: 5 })],
    requestPolicy: "cache-and-network",
    fetchOptions: () => {
      if (options?.token) {
        return {
          headers: { authorization: options.token ? `Bearer ${options.token}` : "" }
        }
      }
      else return {}
    }
  })
  return client
}

server-client.ts

import { connect } from "#scripts/connect";
export let _gql_client = map(connect())

Then use like so in my SSR astro pages:
pages/index.astro

---
import { _gql_client } from "#stores/server-client"
let { product: product_slug } = Astro.params

const product_result = await _gql_client
    .get()
    .query<ProductDetailsQuery, ProductDetailsQueryVariables>(query_product_details, { slug: product_slug!, channel: default_channel })

const product = product_result.data?.product

const name = parse_pretty_text(product?.name)
---

<h1 set:html={name} />
.
.
.

[kitten]

First of all and unrelated, just to point this out 😅
Depending on your use case this config is invalid in two ways:

{
    exchanges: [cacheExchange, fetchExchange, retryExchange({ initialDelayMs: 100, maxNumberAttempts: 5 })],
    requestPolicy: "cache-and-network",
}

• The order of exchanges must be respected; retryExchange after the fetchExchange does nothing i.e. there's nothing for it to retry
• cache-and-network and cacheExchange if you're just planning to use @urql/core as a fetch-like library is redundant, just to point this out. This depends on what you're planning to do, but if you're only planning on running GraphQL (i.e. client.query(...)) at compile/build time, you may as well omit cacheExchange.

---

This error in general could be caused by caused by three conditions (afaik), without looking into this too much:

• TLS/SSL is misconfigured
• Your fetch or fetch polyfill are making an invalid TLS/HTTPS request in Node
• You're trying to connect to an HTTP endpoint with an HTTPS connection (which can also happen due to a misconfigured proxy)

e.g., see: nodejs/node-v0.x-archive#6779

alternatively, you could try a different fetch polyfill and see if this gives you a more descriptive error (e.g. node-fetch)

[djkato]

Oh thanks for pointing out the exchange issues. Yeah I failed to find a way to use cacheExchange in astro/svelte and it lingered there still from trying stuff from documentation. So I removed it for now.
As for the fetch issues, I payed 0 attention to what fetch my app uses under the hood, and didn't know I can even pick one. Which probably means I'm using the default node one, since I'm using @astrojs/node. Here's the full error message, if that helps finding out what I'm using somehow.

  error: CombinedError: [Network] fetch failed
      at makeErrorResult (storefront/node_modules/@urql/core/dist/urql-core-chunk.mjs:335:10)
      at fetchOperation (storefront/node_modules/@urql/core/dist/urql-core-chunk.mjs:563:11)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///storefront/node_modules/wonka/dist/wonka.mjs:877:20 {
    graphQLErrors: [],
    networkError: TypeError: fetch failed
        at Object.fetch (node:internal/deps/undici/undici:11600:11)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async fetchOperation (file:///storefront/node_modules/@urql/core/dist/urql-core-chunk.mjs:466:18)
        at async file:///storefront/node_modules/wonka/dist/wonka.mjs:877:20 {
      cause: [Error: 0028F1B3B9140000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:354:
      ] {
        library: 'SSL routines',
        reason: 'wrong version number',
        code: 'ERR_SSL_WRONG_VERSION_NUMBER'
      }
    },
    response: undefined
  },
  extensions: undefined,
  hasNext: false,
  stale: false
}

Querying the same destination app through it's public domain works fine, but I find the roundabout way of going to cloudflare and back to query oneself seems inefficient. I don't even see the point of using ssl locally, so wonder if it's necessary.