useLazyQuery doesn't allow to populate query in lazy way

[adduss]

Hello Apollo Team!

Intended outcome:
I use react and I try to call useLazyQuery, but pass query in lazy way, not in the moment of initialization, but when query will be calculated:

const [generatedGqlQuery, setGqlQuery] = useState(null);
const [getData, { data, loading, error }] = useLazyQuery(generatedGqlQuery);

useEffect(() => {
    if (options && type) {
      const { gqlQuery } = GenerateQuery(options, type);
      setGqlQuery(gqlQuery);
    }
}, [options, type]);

  useEffect(() => {
    if (generatedGqlQuery && type) {
      getData({
        variables: {
          type: type
        },
      });
    }
  }, [generatedGqlQuery, type]);

it is happening because useQuery now verify type verifyDocumentType(query, DocumentType.Query); (line 31 in src/react/hooks/useQuery.ts), is there any way to overcome this scenario?

Actual outcome:
Error: Argument of null passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document

How to reproduce the issue:
Call useLazyQuery with null as query parameter

Versions
It is not working in 3.5.5
It was working in 3.4.16

[jerelmiller]

Hey @adduss 👋

I realize its been quite a while since you opened this issue so I appreciate your patience! I'm hoping you've been able to find a solution for this in the mean time.

You could get around this limitation (though I'm a bit hesitant to call it that), by passing useLazyQuery a dummy gql document as your initial document. This would allow the underlying verification to pass while you compute the query document in other parts of your code.

const DUMMY_QUERY = gql`
  query {
    dummyQueryDoNotUse
  }
`

const [generatedGqlQuery, setGqlQuery] = useState(DUMMY_QUERY);
// ...

The execute function returned from useLazyQuery also accepts a query document as an option which will be used over anything passed to the hook. You can use this to pass it the real document you want to use:

getData({
  query: generatedGqlQuery,
  variables: { type: type }
})

---

Just as a side note, we wouldn't typically recommend the approach in this issue. Instead we'd encourage you to instead conditionally render your component. The data flow is much clearer that way and you can avoid the need for the useEffect hooks.

function Parent() {
  return options && type 
    ? <Child options={options} type={type} /> 
    : <PlaceholderUI />;
}

function Child({ options, type }) {
  // No need for useLazyQuery. You can just use `useQuery` instead!
  const { data } = useQuery(GenerateQuery(options, type), { variables: { type: type } });

  // No more need for useEffect! Your component has all the data it needs for useQuery
}

---

I'm going to go ahead and close this as I don't see anything else actionable here. Again, appreciate the patience on a response!

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.