Question

我正在使用Apollo Graphql创建一个React应用，并且还使用它来管理我的本地状态。

在我的代码中，我有一个组件，该组件用于通过一些本地@client字段查询我的graphql服务器，并将数据传递给其子组件：

function ProductDetails(props: Props) {
  const classes = useStyles();
  const [subproducts, setSubproducts] = useState(new Array<Product>());

  const productQuery = useGetProductDetailsQuery({
    variables: {
      productId: Number(props.match.params.productId),
      companyId: Number(props.match.params.companyId),
    },
    onCompleted: data => {
      const result = flattenSubproductsConnection(data!.getProducts as ProductConnection);
      setSubproducts(result);
      console.log('Result', result);
    },
  });

  return (
    <Box display='flex' flexDirection='column'>
      {subproducts.map(subproduct => (
        <Choosable product={subproduct} key={subproduct.numericalId!} />
      ))}
    </Box>
  );
}

每个子组件都可以触发更改整体状态的突变，例如：

export default function QuantitySimple(props: Props) {
  const classes = useStyles();

  const [increaseQuantity] = useIncreaseChosenProductQuantityMutation({
    variables: { productId: props.product.id },
  });
  const onIncreaseQuantityClick = useCallback(() => {
    increaseQuantity();
  }, []);

  const [decreaseQuantity] = useDecreaseChosenProductQuantityMutation({
    variables: { productId: props.product.id },
  });
  const onDecreaseQuantityClick = useCallback(() => {
    decreaseQuantity();
  }, []);

  return (
    <ListItem>
      <Box display='flex' alignItems='center'>
        <span onClick={onDecreaseQuantityClick}>
          <FontAwesomeIcon icon={faMinusCircle} size='lg' />
        </span>
        <Typography className={classes.text}>{props.product.chosenQuantity}</Typography>
        <span onClick={onIncreaseQuantityClick}>
          <FontAwesomeIcon icon={faPlusCircle} size='lg' />
        </span>
      </Box>
      <ListItemText className={classes.text} primary={props.product.name} />
      <ListItemText primary={getProductPrice(props.product)} />
    </ListItem>
  );
}

因此，每当我单击上面组件上的加号或减号图标时，我的应用程序的本地状态都会更改，但是此更改不会反映在UI上。

请注意，props.product.chosenQuantity是我的Graphql查询上的本地@client字段，它始终来自父组件。我在做错什么吗？

我应该创建一个特定的@client查询只是为了在我的子组件上获取此字段吗？

我也尝试像这样从Apollo客户端使用watchQueries：

  const apolloClient = useApolloClient();

  apolloClient
    .watchQuery({
      query: GetProductDetailsDocument,
      variables: {
        productId: Number(props.match.params.productId),
        companyId: Number(props.match.params.companyId),
      },
    })
    .subscribe(queryResult => {
      console.log('Query Result', queryResult);
      const result = flattenSubproductsConnection(queryResult.data
        .getProducts as ProductConnection);
      setSubproducts(result);
    });

但是此订阅一直被触发，根本没有任何更改，所以我想我也做错了。

有人可以帮我吗？

如何使用React Apollo监听本地状态变化

0 个答案: