How can I use useLazyLoadQuery when onClick event triggers

Question

I have a notifications list component that renders all notifications that U have Each notification, when clicked on, will show a pop up, that pop up will receive a parameter to run a specific query(this pop up will fetch a survey by it's id for example) I want to use relay such that I will be able to do this Can you please help?

I can't use useLazyLoadQuery since I can't call it in a method(because I want it to be called onClick )

I used usePreloadedQuery and it will fetch the survey as expected but the component will be rendered alot

Answer 1

you can use fetchQuery on load 'react-relay' in onClick:

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) => {...}
        });
      })
  }