Question

我从下面的代码开始：

组件Bar具有一个回调，用于处理来自选择器组件Foo的值；
组件Foo包含一个选择器和一些显示组件；
在Foo中更改选择时，将调用Bar提供的回调，将触发懒惰的graphql查询，并且Foo将使用从该查询中接收到的数据进行更新。此时一切都按预期进行。

const Foo = ({callback}) => {
  // hook generated with graphql-codegen tools to query on demand
  const [queryStuff, {data, loading}] = useMyLazyQuery();

  // selection changed: notify parent and trigger query
  const somethingChanged = useCallback(newValue => {
    callback(newValue);
    queryStuff({variables: {input: newValue}});
  }, [queryStuff, callback]);

  return (
    <div>
      <SomeSelector onSomethingChange={somethingChanged} />
      <SomeDisplay data={data} loading={loading} />
    </div>
  );
}

const Bar = () => {
  const somethingCallback = useCallback(newValue => {
    // do stuff with value
  }, []);

  return <Foo callback={somethingCallback}/>
}

现在我需要对查询数据做一些额外的工作，因此我将查询调用移至Bar回调中，并将结果数据传递给Foo：

// data and loading status now come from parent
const Foo = ({callback, data, loading}) => {
  // selection changed: notify parent
  const somethingChanged = useCallback(newValue => {
    callback(newValue);
  }, [callback]);

  return (
    <div>
      <SomeSelector onSomethingChange={somethingChanged} />
      <SomeDisplay data={data} loading={loading} />
    </div>
  );
}

const Bar = () => {
  // hook generated with graphql-codegen tools to query on demand
  const [queryStuff, {data, loading}] = useMyLazyQuery();

  // selection changed: do stuff and trigger query
  const somethingCallback = useCallback(newValue => {
    // do stuff with value
    queryStuff({variables: {input: newValue}});
  }, [queryStuff]);

  useEffect(() => {
    // do some extra stuff with data
  }, [data]);

  return <Foo callback={somethingCallback} data={data} loading={loading}/>
}

现在由于某种原因，查询根本不再被触发。我用控制台日志+调试器三遍检查了somethingChanged和somethingCallback仍在执行，queryStuff函数仍然用期望的变量调用，但是相应的graphql查询根本不会显示完全在“网络”标签中。

Apollo devtools显示，从GraphiQL手动执行查询时，查询仍然可以正常工作，只是不再从新版本的代码中执行查询。

可能我遗漏了一些明显的东西，但在这一点上我没有想法。

惰性查询挂钩在移至上层组件后停止工作

0 个答案: