[Feature] Added rate limiting on Apollo Client

[Michael-Gibbons]

WHY are these changes introduced?

REDO of #715 Loom video explaining the changes and showing a test case https://www.loom.com/share/9bfb9d241b034b9cb7f4348ba690d4fd

@paulomarg I added a test component and added it to the homepage to display the functionality, you will want to remove it if you decide to merge. Just didn't want you to have to make your own test component

To encourage responsible API usage.

Currently there is no built in way to handle rate limiting. This causes unneeded stress on Shopify's api as well as dropped requests from the user's perspective.

WHAT is this pull request doing?

This pull request is leveraging @apollo/client to wait for available points if applicable, dynamically responding to the shop's refresh rate, available bucket size, etc

Introduced dependencies

zen-observable 80kb, 6M weekly downloads, 0 dependencies. Very safe

Test case

Below is a test case to run up the GQL limit in order to demonstrate the functionality. Feel free to insert your own.

const PRODUCTS_QUERY = gql`
  {
    products(first: 100) {
      edges {
        cursor
        node {
          id
          title
          onlineStoreUrl
        }
      }
    }
  }
`;

  const [productQuery, productQueryState] = useLazyQuery(PRODUCTS_QUERY)

  useEffect(() => {
    for (let index = 0; index < 1000; index++) {
      console.log(index)
      productQuery({variables: {time: Date.now().toString()}});// adding date as unused var prevents request caching
    }
  },[])

[caution-tape-bot[bot]]

:wave: It looks like you're updating JavaScript packages that are known to cause problems when duplicated.

You can deduplicate them with the yarn-deduplicate utility:

npx yarn-deduplicate --packages graphql react react-dom webpack
npx yarn-deduplicate --scopes @shopify @apollo

If running these commands doesn't produce a change in your yarn.lock file, you didn't have duplications in these packages and can carry on.

A duplicate React version may cause an invalid hook call warning.

React context providers usually use module-scoped globals as their default context values. Multiple versions of such packages will yield multiple global instances, resulting in oblique runtime errors.

[Michael-Gibbons]

@paulomarg @JaKXz Bumping this. lmk if there are any issues to fix. Have a good day!

[Michael-Gibbons]

Closing this as it is too out of date to be useful, also not sure if it will be needed if GQL ends up being deprecated.