How to use with Astro + React?

[kaushalyap]

I am trying use URQL inside a React component Astro project, but using useQuery gives following error

No client has been specified using urql's Provider. please create a client and add a Provider.

Which make sense in Astro project I do not have root component. I tried to use

 const [result] = useQuery({
    query: QUERY,
    variables: { first: 1 },
    context: {
      url: "https://swapi-graphql.netlify.app/.netlify/functions/index",
    },
  });

still gives the same error, as I searched I found there is no API to pass client object to useQuery hook. There was suggestion for multiple clients but it was rejected, Apollo client supports client object

Current solution seems to be

const { data, error } = await client.query(QUERY, { first: 1 }).toPromise();

Disadvantages with this is it does not give you the fetching state and refetching function.

Is there any other way to solve this problem?