Loading...
;\n }\n\n if (error) {\n returnError: {error.message}
;\n }\n\n // Render your component using the data returned by the query\n};\n```\n\n**Example with AirstackProvider**\n\n```jsx\nimport { AirstackProvider, useQuery } from \"@airstack/airstack-react\";\n\n\nconst App () => {\n return (\nLoading...
;\n }\n\n if (error) {\n returnError: {error.message}
;\n }\n\n // Render your component using the data returned by the query\n};\n```\n\n## Hooks\n\n**All the hooks can take 3 arguments**\n\n| Argument | Description | Options |\n| ------------------ | ---------------------------------------------- | ------------------- |\n| query (required) | The GraphQL query string to be executed. | String |\n| variables | Variables to be used in the GraphQL query. | RecordLoading...
;\n }\n\n if (error) {\n returnError: {error.message}
;\n }\n\n // Render your component using the data returned by the query\n};\n```\n\n### useLazyQuery\n\nThe `useLazyQuery` hook is used when you want to fetch query data manually, instead of automatically when the component mounts. It returns an array with two items:\n\n- `fetch`: a function that can be called to execute the query.\n- An object with the same properties as the object returned by `useQuery`: `data`, `loading`, and `error`.\n\n##### Example\n\n```jsx\nimport { useLazyQuery } from \"@airstack/airstack-react\";\n\nconst MyComponent = () => {\n const [fetch, { data, loading, error }] = useLazyQuery(query, variables);\n\n const handleClick = () => {\n fetch();\n };\n\n if (loading) {\n returnLoading...
;\n }\n\n if (error) {\n returnError: {error.message}
;\n }\n\n // Render your component using the data returned by the query\n};\n```\n\n### Pagination Hooks\n\n**Note:** pagination hooks only work with queries that have support for pagination.\n\n### useQueryWithPagination\n\nThe `useQueryWithPagination` hook provides a simple way to paginate the data returned by a query. It works the same as the `useQuery` hook, but also returns an object with the following properties:\n\n- `pagination`: an object with the following properties:\n - `hasNextPage`: a boolean indicating whether there is another page of data after the current page.\n - `hasPrevPage`: a boolean indicating whether there is another page of data before the current page.\n - `getNextPage`: a function that can be called to fetch the next page of data.\n - `getPrevPage`: a function that can be called to fetch the previous page of data.\n\n##### Example\n\n```jsx\nimport { useQueryWithPagination } from \"@airstack/airstack-react\";\n\nconst MyComponent = () => {\n const { data, loading, pagination } = useQueryWithPagination(\n query,\n variables,\n configAndCallbacks\n );\n const { hasNextPage, hasPrevPage, getNextPage, getPrevPage } = pagination;\n\n const handleNextPage = () => {\n getNextPage();\n };\n\n const handlePrevPage = () => {\n getPrevPage();\n };\n\n if (loading) {\n returnLoading...
;\n }\n\n if (error) {\n returnError: {error.message}
;\n }\n\n // Render your component using the data returned by the query\n};\n```\n\n### useLazyQueryWithPagination\n\nThe useLazyQueryWithPagination hook is used when you want to manually fetch paginated data. It returns an array with two items:\n\n1. `fetch`: a function that can be called to execute the query.\n2. An object with the same properties as the object returned by useQueryWithPagination: `data`, `loading`, and `pagination`.\n\nThe `fetch` function can be called whenever you want to execute the query, for example, in response to a user action like clicking a button to load more data. The hook returns the `data`, `loading`, and `pagination` properties just like useQueryWithPagination.\n\nHere's an example of using useLazyQueryWithPagination:\n\n```jsx\nimport { useLazyQueryWithPagination } from \"@airstack/airstack-react\";\n\nfunction Component() {\n const [fetchData, { data, loading, pagination }] = useLazyQueryWithPagination(\n query,\n variables\n );\n\n const loadMore = () => {\n if (pagination.hasNextPage) {\n pagination.getNextPage();\n }\n };\n\n return (\nLoading...
}\n