Problem when I try to run two react-query in a row

Question

I have two different endpoints, one that is called with getProjectMapping and one with getStaffing . The getProjectMapping query must be run first in order to set the project variable, which will then be used to make the getStaffing request. But I get the following error:

Uncaught TypeError: project is null

I get that error in the getStaffing request, although before activating it I check that the project is not null. Does anyone know what is wrong?

const Staffing = () => {
  const { tokenApi } = useContext(LoginContext);
  const [project, setProject] = useState(null);

  const {
    data: projectMapping,
    isLoading: projectMappingIsLoading,
    isFetching,
  } = useQuery("ProjectMapping", () => getProjectMapping(tokenApi), {
    onSuccess: () => {
      if (projectMapping != null && projectMapping.length !== 0) {
        setProject(projectMapping[0]);
      }
    },
  });

  const { data, isLoading } = useQuery(
    [project.value, "Staffing"],
    () => getStaffing(project.value, tokenApi),
    {
      enabled: !isFetching && project != null,
      dependencies: [project],
    }
  );
}

Answer 1

make the project.value optional and do a refetch when project data is set

  const { data, isLoading, refetch } = useQuery(
    [project?.value, "Staffing"],
    () => getStaffing(project?.value, tokenApi),
    {
      enabled: !isFetching && project != null,
      dependencies: [project],
    }
  );

  useEffect(() => {
     if(project){
       refetch()
     }
  }, [project])

Answer 2

This isn't how you structure dependent queries.. Instead of setting state you should derive it. If you have dependent queries it might also make sense to wrap them in a custom hook

eg

const useProjectStaffing = (tokenApi) => {
  const {
    data: [project] = [],
    isLoading: projectMappingIsLoading,
  } = useQuery("ProjectMapping", () => getProjectMapping(tokenApi), {
    
    },
  });
  const projectValue = project && project.value

  return useQuery(
    [projectValue, "Staffing"],
    () => getStaffing(projectValue, tokenApi),
    { enabled: !!projectValue   }
  );
}

const Staffing = () => {
  const { tokenApi } = useContext(LoginContext);
  const {isLoading, data: staffing} = useProjectStaffing(tokenApi);
  // ... do stuff with the staffing data when it comes back.