Closed shtse8 closed 2 years ago
Hiya, thanks for the stack trace, that does look like a problem on our end, so I'll have a look once I'm free later today. Seems that it wasn't too hard for you to run into this issue, so I'll try to get to it asap š
Can you add on the output of yarn list
or npm list
please? I'm basically just looking for the installed versions of @urql/core
and wonka
, since there may be an incompatibility when multiple ones of the two are installed that I may have missed.
If that's the case btw, then running yarn-deduplicate
or npm dedupe
, depending on your package manager, may fix the issue
It may be a long list since I am working on a big project.
I doubt it's a issue of @urql/vue
useQuery
.
I tried to run yarn-deduplicate
but it's nothing happen and the issue still exists.
PS D:\project> yarn-deduplicate
PS D:\project>
That's alright, I found the relevant section š You indeed don't have any duplicate sub-dependencies for urql, so I'm wondering whether the executeExchange
has a subtle regression. I'll try to track it down
That's alright, I found the relevant section š You indeed don't have any duplicate sub-dependencies for urql, so I'm wondering whether the
executeExchange
has a subtle regression. I'll try to track it down
For your reference, I tried to use fetchExchange instead of executeExchange, but the issue still exists.
the trace is pointing me to this.
I thought it is about vue + useQuery. I don't know how to test if I don't use useQuery. It seems lots of codes need to change for testing.
ok, I can confirm one thing. useQuery
causes the issue.
I replace all Urql.useQuery
with my self implemented useQuery
as follow, and everything works fine.
import type { AnyVariables, OperationContext } from '@urql/core/dist/types/types'
import type { Client, UseQueryArgs } from '@urql/vue'
import type { Ref } from '@vue/reactivity'
import { get, resolveUnref } from '@vueuse/shared'
export function useQuery<Data = any, Variables extends AnyVariables = AnyVariables>(_args: UseQueryArgs<Data, Variables>, context?: Partial<OperationContext>): ReturnType<typeof executeQuery> & Awaited<ReturnType<typeof executeQuery>> {
const client = inject('$urql') as Ref<Client>
const data = ref<Data>()
const error = ref<Error>()
const fetching = ref<boolean>(false)
const isPausing = ref(resolveUnref(_args.pause))
const returnObject = {
data,
error,
fetching,
pause() {
isPausing.value = true
},
resume() {
isPausing.value = false
},
}
function executeQuery(context?: Partial<OperationContext>) {
try {
const query = get(_args.query)
let variables = resolveUnref(_args.variables)
if (variables) {
// clone object
variables = Object.assign({}, variables)
for (const key in variables)
variables[key] = resolveUnref(variables[key])
}
fetching.value = true
return client.value.query<Data, Variables>(query, variables as Variables, context).toPromise().then((result) => {
fetching.value = false
data.value = result.data
error.value = result.error
return {
...returnObject,
executeQuery,
}
})
}
catch (e) {
if (e instanceof Error)
error.value = e
throw e
}
}
let result: ReturnType<typeof executeQuery>
watchEffect(() => {
if (isPausing.value)
return
result = executeQuery(context)
})
return {
...returnObject,
executeQuery,
then(...args: any[]) {
return result.then(...args)
},
} as any
}
for others who facing the same issue, don't take this version to production as it is rough and just for finding the cause.
Ah, I see what's going on here. I inspected the code and it landed on an immediately invoked subscription object, which couldn't actually be declared in time, since it uses a const
variable. This was previously using a var
statement, hence hoisting its declaration and it becoming usable in time.
Edit: I also want to point out, thank you not only for reporting this, but also for sending me the error with a fully sourcemapped stack trace! Without it, this could've taken me hours to hunt down, since I don't have a full Vue+urql app set up yet š
This should now be resolved in the latest release (@urql/vue@1.0.2
)
https://github.com/FormidableLabs/urql/pull/2630
Ah, I see what's going on here. I inspected the code and it landed on an immediately invoked subscription object, which couldn't actually be declared in time, since it uses a
const
variable. This was previously using avar
statement, hence hoisting its declaration and it becoming usable in time.Edit: I also want to point out, thank you not only for reporting this, but also for sending me the error with a fully sourcemapped stack trace! Without it, this could've taken me hours to hunt down, since I don't have a full Vue+urql app set up yet š
Awesome! I can confirm the bug is fixed and it works perfectly! Thanks for your effective help! was being worried it will last long and that's why I made a workaround solution for my project.
Describe the bug
I tried several hours to figure out the cause. But no luck. I don't have any idea. I tried to make it very simple, error still exists. I tried to remove
ssrExchange
on client side, it seems working fine on first load. but due to nossrExchange
. All queries are executing again and I am not really sure if it is working fine. and after routing some pages in app, error still occurs.I am using Nuxt3 + Graphql server + urql,
Here are my configs which morks fine before upgrade.
urql.server.ts
urql.client.ts
Reproduction
will do, please give me some time. I am still no idea about the cause.
Urql version
urql 3.0
Validations