feat(admin-ui): Add React useLazyQuery hook

[alexisvigoureux]

Description

The aim is to be able to execute a graphql query in response to an event (a click on a button for example). In the same way as we do with useMutation. Today, the useQuery is executed as soon as the React component is loaded, which limits its use.
A complete example of use is available in the code.

More info about useLazyQuery in Apollo documentation

Breaking changes

No breaking changes

How to test

In dev-server/ui-extensions-library/ui/react-components/ReactUI.tsx
Add

import {useLazyQuery} from '@vendure/admin-ui/react';

const GET_PRODUCT = gql`
   query GetProduct($id: ID!) {
     product(id: $id) {
       id
       name
       description
     }
   }`;

type ProductResponse = {
    product: {
        name: string
        description: string
    }
}

export function ReactUi() {
const [getProduct, { data, loading, error }] = useLazyQuery<ProductResponse>(GET_PRODUCT);

const handleClick = () => {
        getProduct({
                id: '1',
        }).then(result => {
            // do something with the result
        });
    };

...
return (
...
<Card title="Test useLazyQuery">
                        <div>
                            <button onClick={handleClick} className="btn btn-primary">Get product</button>
                            {data && (
                                <div>
                                    <h1>{data.product.name}</h1>
                                    <p>{data.product.description}</p>
                                </div>)}
                        </div>
                    </Card>
)}

Screenshots

demo.mov

Checklist

📌 Always:

• I have set a clear title
• My PR is small and contains a single feature
• I have checked my own PR

⚡ Most of the time:

• I have added or updated test cases
• I have updated the documentation

[netlify]

✅ Deploy Preview for effervescent-donut-4977b2 ready!

Name	Link
🔨 Latest commit	0f03454
🔍 Latest deploy log	https://app.netlify.com/sites/effervescent-donut-4977b2/deploys/654356f7c0db7300080b5d3c
😎 Deploy Preview	https://deploy-preview-2498--effervescent-donut-4977b2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[michaelbromley]

Thanks, this looks like a nice addition, and good work with the documentation too.

Could you make this against the minor branch though since it's a new feature?

[alexisvigoureux]

Do you have an estimated date for the next minor release?
I did the PR against the master branch because I was hoping to get it quickly as we're stuck with the way useQuery works. Lost bet. I will change the source branch

[michaelbromley]

I understand :) I don't have a date for the next minor but I will start releasing the current minor under the next tag soon, because we now have a couple of new features already added.

Another option is to temporarily implement this in your own code. It would be OK to add an export to the useDataService hook so you can import it into your own code and thus only have a small amount of code to maintain in the mean time.

[alexisvigoureux]

export useDataService is a good quick win. Thanks for the suggestion, the PR is available here