Data Race in a useEffect
Hi,
I have been using tRPC for a while, and it has been amazing. I am currently running into a small issue. In one of my components, I create a new project and onSuccess, I refresh the endpoints:
On another component, I read the existing projects and depending on them, I perform an action (search for duplicates)
I have been using tRPC for a while, and it has been amazing. I am currently running into a small issue. In one of my components, I create a new project and onSuccess, I refresh the endpoints:
const { mutate: createProjects } = trpc.createProjectsFromCsv.useMutation({
onSuccess: (data: { successfullProjects: any[],
failedProjects: any[]
}) => {
setSuccessfullProjects(data.successfullProjects)
setFailedProjects(data.failedProjects)
utils.getUserProjects.invalidate()
** utils.getOrganizationProjects.invalidate()**
utils.getVerifiedProjects.invalidate()
setIsLoading(false)
},const { mutate: createProjects } = trpc.createProjectsFromCsv.useMutation({
onSuccess: (data: { successfullProjects: any[],
failedProjects: any[]
}) => {
setSuccessfullProjects(data.successfullProjects)
setFailedProjects(data.failedProjects)
utils.getUserProjects.invalidate()
** utils.getOrganizationProjects.invalidate()**
utils.getVerifiedProjects.invalidate()
setIsLoading(false)
},On another component, I read the existing projects and depending on them, I perform an action (search for duplicates)
const { data: existingProjects, isLoading, refetch } = trpc.getOrganizationProjects.useQuery({id: activeOrganizationId})
useEffect(() => {
if (!projects) return
if (isLoading) return
const allProjects = [...projects, ...existingProjects || []]
let isDuplicate = false
{ code that figures out if there are duplicates and sets projectGroupings }
if (!isDuplicate && refetchTries < 2) {
refetch()
setRefetchTries(refetchTries + 1)
return
}
if (refetchTries >= 2) {
setTab('review')
}
{ more code that doesn't matter for this purpose }
}, [activeOrganizationId, existingProjects, isLoading, projects, refetch, refetchTries, setTab])const { data: existingProjects, isLoading, refetch } = trpc.getOrganizationProjects.useQuery({id: activeOrganizationId})
useEffect(() => {
if (!projects) return
if (isLoading) return
const allProjects = [...projects, ...existingProjects || []]
let isDuplicate = false
{ code that figures out if there are duplicates and sets projectGroupings }
if (!isDuplicate && refetchTries < 2) {
refetch()
setRefetchTries(refetchTries + 1)
return
}
if (refetchTries >= 2) {
setTab('review')
}
{ more code that doesn't matter for this purpose }
}, [activeOrganizationId, existingProjects, isLoading, projects, refetch, refetchTries, setTab])
