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:

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])

Data Race in a useEffect

Similar Threads