onClick事件触发时如何使用useLazyLoadQuery

Question

我有一个通知列表组件，可以呈现您拥有的所有通知 单击每个通知时，都会显示一个弹出窗口，该弹出窗口将接收一个参数来运行特定查询（例如，此弹出窗口将通过其 ID 获取调查） 我想使用中继，这样我就能够做到这一点 你能帮忙吗？

我无法使用 useLazyLoadQuery 因为我无法在方法中调用它（因为我希望它被称为 onClick ）

我使用了 usePreloadedQuery ，它将按预期获取调查，但组件将被大量渲染

Answer 1

您可以在 onClick 中加载'react-relay'时使用 fetchQuery：

function MyComponent() {
  const environment = useRelayEnvironment();
  
  const handleClickOnNotif=()=>{
      import('react-relay').then((relay)=>{
        const fetchQuery = relay.fetchQuery
        fetchQuery(
          environment,
          graphql`
            query AppQuery($id: ID!) {
              user(id: $id) {
                name
              }
            }
          `,
          {id: 4},
        )
        .subscribe({
          start: () => {...},
          complete: () => {...},
          error: (error) => {...},
          next: (data) => {...}
        });
      })
  }