a is not a function

[shukii]

I'm running urql within my application, and occasionally this error pops up and crashes my app running locally:

////node_modules/wonka/dist/wonka.js:608
          c.forEach(function (c) {
            ^
TypeError: a is not a function
    at ////node_modules/@urql/core/src/exchanges/fetch.ts:36:17
    at ////node_modules/wonka/dist/wonka.js:167:16
    at ////node_modules/wonka/dist/wonka.js:482:60
    at ////node_modules/wonka/dist/wonka.js:609:13
    at Array.forEach (<anonymous>)
    at b (////node_modules/wonka/dist/wonka.js:608:13)
    at ////node_modules/wonka/dist/wonka.js:1146:42
    at ////node_modules/wonka/dist/wonka.js:630:31
    at ////node_modules/wonka/dist/wonka.js:180:49
    at h (////node_modules/wonka/dist/wonka.js:163:57)

I've already reached out to wonka (0no-co/wonka#112) and it suggests that it could lie with the urql library

Any help would be greatly appreciated, as it is causing a bad developer experience

Thanks

[kitten]

Without a reproduction there's not much I can do.

This still applis here, as the information provided is simply a symptom but no additional information on your setup. So, we can only speculate, but you should check using yarn list --pattern urql and yarn list --pattern wonka (or the equivalent in npm if you're using that instead) what the installed packages look like, whether you have any duplicates, and whether any package isn't complying to the dependency tree as expected.

That said, since the stack trace isn't useful to us without versions, the code itself, lines resolved, etc; in other words, without seeing where this error occurs, we can't actually make any other assumptions or suggestions for the time being.

[shukii]

Hi @kitten

Here's the output of the commands mentioned above:

➜ npm list --pattern urql
/app-name
└── [email protected]

➜ npm list --pattern wonka
/app-name
├─┬ [email protected]
│ ├─┬ @urql/[email protected]
│ │ └── [email protected]  deduped
│ └── [email protected]  deduped
└── [email protected]

[kitten]

If you're using the same with npm can you run npm list @urql/core please? Ultimately we care about deduplication there

[shukii]

Sure

app-name
└─┬ [email protected]
  └── @urql/[email protected]

[kitten]

Alright, without code I can't really pinpoint this now, since the dependencies look fine, but this feels like you've got something in your exchanges array that isn't an exchange, i.e. an invalid function, a factory missing its call with arguments, etc

[shukii]

Here's a snippet

const traceExchange =
  (trace) =>
  ({ forward }) =>
  (operations$) => {
    return pipe(
      operations$,
      tap((op) => {
        if (trace && op.operationName === 'query') {
          trace(
            `URQL - ${op.query.definitions.find(({ kind }) => kind === 'OperationDefinition').name.value}`,
            'startRequest'
          )
        }
      }),
      forward
    )
  }

const errorExchange =
  ({ forward }) =>
  (operations$) => {
    return pipe(
      operations$,
      forward,
      tap(({ error }) => {
        if (error) {
          const { graphQLErrors, networkError } = error
          if (graphQLErrors) {
            graphQLErrors.map(({ message, locations, path }) =>
              console.error(
                `[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`
              )
            )
          }
          if (networkError) console.log(`[Network error]: ${networkError}`)
        }
      })
    )
  }

const expiringCache = expiringCacheFactory(fetchExchange)

const makeClient = ({ isServer, fetch, trace, ctx }) => {
  const ssrCache = ssrExchange({
    initialState: !isServer ? initialState : null,
    isClient: !isServer
  })

  const exchanges = isServer
    ? [dedupExchange, traceExchange(trace), ssrCache, expiringCache, errorExchange, fetchExchange]
    : [dedupExchange, cacheExchange, ssrCache, errorExchange, fetchExchange]

  if (isServer) {
   // Add headers
    }
   // Add cookies for client and security credentials for server
    }
  }

  const client = createClient({
    url: coreUrl,
    suspense: isServer,
    fetch,
    fetchOptions,
    exchanges
  })

[kitten]

What's the expiringCacheFactory(fetchExchange) factory doing here / how is that implemented?

[shukii]

Sorry, please see below

import Cache from 'node-cache'
import { pipe, tap, map, fromValue, filter, merge, share, subscribe } from 'wonka'

const CACHE_TIME_TO_LIVE = 300 // seconds
const CACHE_CHECK_FOR_EXPIRED = 5 // seconds

const updateCache = (forward, cache) => (operations$) => {
  return pipe(
    operations$,
    forward,
    tap(response => {
      if (!response.error) {
        cache.set(response.operation.key, {
          response,
          operation: response.operation,
          shouldRefresh: false
        })
      }
    })
  )
}

const returnAndUpdateCache = (forward, cache, operations$) => {
  const shared = share(operations$)
  return merge(
    [pipe(
      shared,
      filter(op => cache.get(op.key)),
      map(op => {
        const cacheValue = cache.get(op.key)
        if (cacheValue.shouldRefresh) return cacheValue.response
        cache.set(op.key, { ...cacheValue, shouldRefresh: true })
        return cacheValue.response
      })
    ),
    pipe(
      shared,
      filter(op => {
        return !cache.get(op.key)
      }),
      updateCache(forward, cache)
    )]
  )
}

export default (fetchExchange) => {
  const cache = new Cache({
    stdTTL: CACHE_TIME_TO_LIVE,
    checkperiod: CACHE_CHECK_FOR_EXPIRED,
    deleteOnExpire: false
  })

  const refreshForward = fetchExchange({
    forward: tap(op => console.error(`Unexpectedly forwarded ${op}`))
  })

  cache.on('expired', (key, { shouldRefresh, operation }) => {
    setImmediate(() => {
      if (shouldRefresh && operation) {
        pipe(
          updateCache(refreshForward, cache)(fromValue(operation)),
          subscribe(() => {})
        )
      } else {
        cache.del(key)
      }
    })
  })

  return ({ forward }) => (operations$) => returnAndUpdateCache(forward, cache, operations$)
}

[shukii]

Hi @kitten, any idea what the code above could be causing?

Thanks

Josh

[shukii]

Hi @kitten, we're still experiencing the issue, it's causing a very bad DX.

Did you have any ideas about the expiringCacheFactory?

Thanks

Josh