blitz
blitz copied to clipboard
useQuery refetchInterval option is invalid
What is the problem?
Maybe the useQuery
refetchInterval
option is invalid
My code logic is like this:
- The page loads and requests a QR code valid for 5 minutes and waits for the user to scan the code
- When the QR code request is successful, it will start polling every second to request the backend to check whether the user scans the code.
Paste all your error logs here:
No relevant code, only browser console request logging
video: https://share.cleanshot.com/88PtdG
In the fifth second of the video, I completed the operation of scanning the code on my mobile phone.
Paste all relevant code snippets here:
import { useQuery } from "@blitzjs/rpc"
import React from "react"
import getWechatMpQrState from "../app/auth/queries/getWechatMpQrState"
import getWechatMpQr from "../app/auth/queries/getWechatMpQr"
function WechatQr() {
const [cacheId, setCacheId] = React.useState<string | undefined>()
const [canLoopState, setCanLoopState] = React.useState<boolean>(false)
const [state, stateAction] = useQuery(
getWechatMpQrState,
{ id: cacheId },
{
refetchInterval: 1000,
refetchOnMount: false,
suspense: false,
useErrorBoundary: false,
enabled: canLoopState,
retry: false,
onSuccess: (data) => {
if (data) {
console.log(data)
}
},
onError: (_) => {
}
}
)
const [wechatQr, wechatQrAction] = useQuery(
getWechatMpQr,
{ id: cacheId },
{
refetchInterval: 1000 * 60 * 5,
onSuccess: (data) => {
setCacheId(data.dataId)
setCanLoopState(true)
}
}
)
React.useEffect(() => {
console.log(cacheId)
}, [cacheId])
return (
<div>{wechatQr && <img alt={"qrcode"} className={"max-w-xs"} src={wechatQr.qrUrl} />}</div>
)
}
function AuthPage() {
return <div>
<div>qr</div>
<React.Suspense>
<WechatQr />
</React.Suspense>
</div>
}
export default AuthPage
getWechatMpQr.ts
import { isEmpty, isString } from 'lodash'
import { nanoid } from 'nanoid'
import { z } from 'zod'
import { Ctx } from 'blitz'
import { wechatHelper } from 'integrations/wechat/WechatHepler'
export const GetWechatQr = z.object({
id: z.string().optional(),
})
export async function getWechatQrDataId(input: { id?: string }, ctx: Ctx) {
const data = GetWechatQr.parse(input)
let dataId: string | undefined = data.id
if (isEmpty(dataId)) {
const saveId = ctx.session.$publicData.wechatId!
if (saveId && isString(saveId)) {
dataId = saveId
}
}
if (isEmpty(dataId)) {
dataId = nanoid(12)
await ctx.session.$setPublicData({
wechatId: dataId,
})
}
return dataId as string
}
export default async function getWechatMpQr(input: z.infer<typeof GetWechatQr>, ctx: Ctx) {
const dataId = await getWechatQrDataId(input, ctx)
return {
dataId,
...(await wechatHelper.createLoginQr(dataId)),
}
}
getWechatMpQrState.tx
import { z } from "zod"
import { Ctx } from "blitz"
import db, { User } from "../../../db"
import { WechatHelper } from "integrations/wechat/WechatHepler"
import commonRedis from "integrations/CommonRedis"
import { GetWechatQr, getWechatQrDataId } from "./getWechatMpQr"
import { transformUserSession } from "../utils"
export default async function getWechatMpQrState(input: z.infer<typeof GetWechatQr>, ctx: Ctx): Promise<User | null> {
const dataId = await getWechatQrDataId(input, ctx)
const successId = `${WechatHelper.LOGIN_EVENT_SUCCESS}${dataId}`
if (await commonRedis.exists(successId)) {
const userId = await commonRedis.get(successId)
if (userId) {
const user = await (db.user.findFirst({
where: { id: Number(userId) }
}))
if (user) {
await ctx.session.$create(transformUserSession(user))
return user
}
}
}
return null
}
What are detailed steps to reproduce this?
I didn't reproduce the problem, I can upload the code to the private repo and invite (reply me under issuse)
Run blitz -v
and paste the output here:
➜ blitz -v
Loaded env from /Users/chen/Project/Company/Yinbaitu/36pic/.env.local
Loaded env from /Users/chen/Project/Company/Yinbaitu/36pic/.env
Blitz version: 2.0.0-alpha.57 (global)
Blitz version: 2.0.0-alpha.57 (local)
macOS Monterey | darwin-arm64 | Node: v18.4.0
Package manager: npm
System:
OS: macOS 12.4
CPU: (10) arm64 Apple M1 Max
Memory: 400.39 MB / 64.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.4.0/bin/yarn
npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
npmPackages:
@blitzjs/auth: 2.0.0-alpha.57 => 2.0.0-alpha.57
@blitzjs/next: 2.0.0-alpha.57 => 2.0.0-alpha.57
@blitzjs/rpc: 2.0.0-alpha.57 => 2.0.0-alpha.57
@prisma/client: 4.1.0 => 4.1.0
blitz: 2.0.0-alpha.57 => 2.0.0-alpha.57
next: 12.2.0 => 12.2.0
prisma: 4.1.0 => 4.1.0
react: 18.0.0 => 18.0.0
react-dom: 18.0.0 => 18.0.0
typescript: ^4.5.3 => 4.7.4
Please include below any other applicable logs and screenshots that show your problem:
import React from "react"
import getWechatMpQrState from "../app/auth/queries/getWechatMpQrState"
import getWechatMpQr from "../app/auth/queries/getWechatMpQr"
import { useQuery } from "@tanstack/react-query"
function WechatQr() {
const [cacheId, setCacheId] = React.useState<string | undefined>(undefined)
const [canLoopState, setCanLoopState] = React.useState<boolean>(false)
const { data: state, ...stateAction } = useQuery(["wechat-qr-state", cacheId],
() => {
return getWechatMpQrState({ id: cacheId }, undefined as never)
},
{
refetchInterval: 1000,
refetchOnMount: false,
suspense: false,
useErrorBoundary: false,
enabled: canLoopState,
retry: false,
onSuccess: (data) => {
if (data) {
console.log(data)
}
},
onError: (_) => {
}
}
)
const { data: wechatQr, ...wechatQrAction } = useQuery(["wechat-qr", cacheId],
() => {
return getWechatMpQr({ id: cacheId }, undefined as never)
},
{
refetchInterval: 1000 * 60 * 5,
refetchOnMount: "always",
refetchOnWindowFocus: "always",
refetchOnReconnect: "always",
enabled: true,
onSuccess: (data) => {
// setCacheId(data.dataId)
setCanLoopState(true)
}
}
)
React.useEffect(() => {
setCacheId(Math.random().toString())
}, [])
return (
<div>{wechatQr && <img alt={"qrcode"} className={"max-w-xs"} src={wechatQr.qrUrl} />}</div>
)
}
function AuthPage2() {
return <div>
<div>qr</div>
<React.Suspense>
<WechatQr />
</React.Suspense>
</div>
}
export default AuthPage2
I try to use @tanstack/react-query
directly and it doesn't work
Thanks for the report! We'll try to investigate soon