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

问题描述

我从下面的代码开始：

• 组件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,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手动执行查询时，查询仍然可以正常工作，只是不再从新版本的代码中执行查询。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）