Apollo客户端：useMutation不断返回不变违规

Question

我有一个突变：

export const BATCH_CREATE_PROGRESS_PICS = gql`
  mutation BATCH_CREATE_PROGRESS_PICS(
    $bodyParts: [String!]
    $files: [Upload!]
  ) {
    batchCreateProgressPics(bodyParts: $bodyParts, files: $files) {
      progressPics {
        id
        bodyPart
        url
        key
        bucket
      }
    }
  }
`;

以及允许用户拍摄和上传照片的组件：

const BODY_PARTS = ["left"];

const CameraScreen = () => {
  const [photos, setPhotos] = useState([]);
  const [batchCreateProgressPics, { error }] = useMutation(
    BATCH_CREATE_PROGRESS_PICS,
    {
      variables: { bodyParts: BODY_PARTS, files: photos },
      onCompleted: res => {
        console.log("SUCCESS:", res);
      },
    }
  );
  const camera = useRef(null);

  useEffect(
    () => {
      if (photos.length === BODY_PARTS.length) {
        console.log("photos: ", photos);
        console.log("bodyParts: ", BODY_PARTS);
        batchCreateProgressPics();
      }
    },
    [photos]
  );

  const takePhoto = async () => {
    const photo = await camera.current.takePictureAsync();
    setPhotos([
      ...photos,
      new ReactNativeFile({
        uri: photo.uri,
        name: `${Date.now()}-${BODY_PARTS[photos.length]}.jpg`,
        type: "image/jpeg",
      }),
    ]);
  };

  return (
    <Container>
      <CameraView ref={camera} type={Camera.Constants.Type.front}>
        <Viewer>
          <TopPart>
            <Header>
              <Button onPress={() => navigation.goBack()}>Cancel</Button>
              <Text>{_.startCase(BODY_PARTS[photos.length])}</Text>
            </Header>
            <ThumbnailSection>
              {BODY_PARTS.map((bodyPart, i) => (
                <Thumbnail
                  source={{
                    uri: photos[i] ? photos[i].uri : ICON_QUESTION_MARK,
                  }}
                  shape="square"
                  size="small"
                />
              ))}
            </ThumbnailSection>
          </TopPart>
          <Footer>
            <Button
              disabled={photos.length === BODY_PARTS.length}
              onPress={() => takePhoto()}>
              Take picture
            </Button>
          </Footer>
        </Viewer>
      </CameraView>
    </Container>
  );
};

当我拍照时，应使用适当的变量调用batchCreateProgressPics。但是，它一直显示：

我的日志似乎也在打印正确的内容：

photos:  Array [
  Object {
    "name": "1566256986016-left.jpg",
    "type": "image/jpeg",
    "uri": "file:///var/mobile/Containers/Data/Application/8B5A9DE3-E485-4696-8D95-ED4BE22483F0/Library/Caches/ExponentExperienceData/%2540edmundmai%252Facne-tracker/Camera/5BDB1989-EEFA-4699-BF9F-75B681FC8974.jpg",
  },
]
BODY_PARTS:  Array [
  "left",
]

我在做什么错？这是我第一次使用useMutation而不是组件。

有趣的是，当我更新它以使用Mutation组件时，一切都按预期工作：

const BODY_PARTS = ["left"];

const CameraScreen = ({ navigation }) => {
  const [photos, setPhotos] = useState([]);
  const camera = useRef(null);

  const takePhoto = async () => {
    const photo = await camera.current.takePictureAsync();
    setPhotos([
      ...photos,
      new ReactNativeFile({
        uri: photo.uri,
        name: `${Date.now()}-${BODY_PARTS[photos.length]}.jpg`,
        type: "image/jpeg",
      }),
    ]);
  };

  return (
    <Container>
      <Mutation mutation={BATCH_CREATE_PROGRESS_PICS} onCompleted={console.log}>
        {batchCreateProgressPics => {
          return (
            <CameraView ref={camera} type={Camera.Constants.Type.front}>
              <Viewer>
                <TopPart>
                  <Header>
                    <Button onPress={() => navigation.goBack()}>Cancel</Button>
                    <Text>{_.startCase(BODY_PARTS[photos.length])}</Text>
                  </Header>
                  <ThumbnailSection>
                    {BODY_PARTS.map((bodyPart, i) => (
                      <Thumbnail
                        source={{
                          uri: photos[i] ? photos[i].uri : ICON_QUESTION_MARK,
                        }}
                        shape="square"
                        size="small"
                      />
                    ))}
                  </ThumbnailSection>
                </TopPart>
                <Footer>
                  {photos.length === BODY_PARTS.length ? (
                    <Button
                      onPress={() =>
                        batchCreateProgressPics({
                          variables: {
                            files: photos,
                            bodyParts: BODY_PARTS,
                          },
                        })
                      }>
                      Save photos
                    </Button>
                  ) : (
                    <Button
                      disabled={photos.length === BODY_PARTS.length}
                      onPress={() => takePhoto()}>
                      Take picture
                    </Button>
                  )}
                </Footer>
              </Viewer>
            </CameraView>
          );
        }}
      </Mutation>
    </Container>
  );
};