{"id":26267354,"url":"https://github.com/oslabs-beta/aqls-client","last_synced_at":"2025-04-30T19:08:31.724Z","repository":{"id":57098470,"uuid":"306221589","full_name":"oslabs-beta/Aqls-client","owner":"oslabs-beta","description":"An intelligent full-stack GraphQL subscription and analytics module. Client-side hooks, automatic query parsing, and analytic generation.","archived":false,"fork":false,"pushed_at":"2020-10-22T19:29:54.000Z","size":17,"stargazers_count":95,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-30T19:07:26.081Z","etag":null,"topics":["apollo-client","graphql","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-22T04:25:45.000Z","updated_at":"2023-02-09T23:06:57.000Z","dependencies_parsed_at":"2022-08-20T16:51:09.124Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/Aqls-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FAqls-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FAqls-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FAqls-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FAqls-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/Aqls-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251767187,"owners_count":21640469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","graphql","react"],"created_at":"2025-03-14T04:16:35.494Z","updated_at":"2025-04-30T19:08:31.704Z","avatar_url":"https://github.com/oslabs-beta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Aqls-Client\n\n\n## Overview\nGraphQL analytics toolkit and dashboard that integrate with Apollo Client and Apollo Server Express. It is an easy to use analytics suite that monitors GraphQL subscriptions concurrency, latency, errors, and resolver frequency. Our integrated dashboard displays your GraphQL analytics on dynamic and interactive charts. \n\nThis package is for setting up your client-side. For the server-side package please refer to the [Aqls-server](https://github.com/oslabs-beta/Aqls-server) package.\n\n**Note:** Aqls is currently in BETA and improvements will continue to be implemented. If any issues are encountered while using our application, please submit a PR. \n\n\n## Requirements\n- **React** *version* 16.8+\n- **apollo-client** *version* 3.2.1+\n\n## Install\nWith npm:\n\n```\nnpm install --save @aqls/client\n```\n\n## Tracking GraphQL Subscriptions\n\n####\n- [ ] **1**. Import useqAqlSubscription:\n\n```javascript\nimport { useAqlSubscription } from '@aqls/client';\n```\n####\n- [ ] **2**. Include aql in GraphQL query:\n```javascript\nconst colorSubscription = gql`\n    subscription {\n      updatedColor {\n        cssColor\n        aql {\n          mutationSendTime\n          mutationReceived\n          subscriberReceived\n          mutationId\n          resolver\n          userToken\n        }\n      }\n    }\n  `;\n```\n####\n- [ ] **3**. Invoke useAqlSubscription hook:\n```javascript\n const { data, loading, error } = useAqlSubscription(\n    graphQLQuery,\n    { optionsObject },\n    subscriptionResolver,\n  );\n```\n**Note:** optionsObject accepts any options available in the [Apollo-client useSubscription](https://www.apollographql.com/docs/react/data/subscriptions/#options) hook\n###\n**useAqlSubscription hook example:** \n```javascript\n const { data, loading, error } = useAqlSubscription(\n    colorSubscription,\n    {\n      onSubscriptionData: (client) =\u003e {\n        setColor(client.subscriptionData.data.updatedColor.cssColor);\n      },\n    },\n    'updatedColor',\n  );\n ```\n####\n## Tracking GraphQL Mutations\n\n####\n- [ ] **1**. Import useqAqlMutation:\n\n```javascript\nimport { useAqlMutation } from '@aqls/client';\n```\n####\n- [ ] **2**. Invoke useAqlMutation hook:\n```javascript\nuseAqlMutation(query)\n```\nThis hook takes a GraphQL query and automatically injects analytics into it. You can use `.then()` if you want to access async functionality. Below is an example using the hook as part of a click handler.\n\n```javascript\nconst handleClick = (chosenColor) =\u003e {\n    const colorQuery = `mutation{newColor(colorArg: \"${chosenColor}\"){id cssColor}}`;\n    useAqlMutation(colorQuery)\n      .then((data) =\u003e\n        setColor(data.chosenColor)\n      )\n      .catch((err) =\u003e setError(err));\n```\n####\n####\n\n- [ ] **Lastly, Connect with the Aqls Team!**\n\nVisit our website: [Aqls.io](https://www.aqls.io/)\n\nContact us: aqlorgteam@gmail.com\n\nCase Simmons: [Case's Github](https://github.com/casesimmons) and [Case's LinkedIn](https://www.linkedin.com/in/case-simmons/)\n\nJulie Pinchak: [Julie's Github](https://github.com/jpinchak) and [Julie's LinkedIn](https://www.linkedin.com/in/julie-pinchak/)\n\nMichael O'Halloran: [Michael's Github](https://github.com/LordRegis22) and [Michael's LinkedIn](https://www.linkedin.com/)\n\nRocio Infante: [Rocio's Github](https://github.com/Rocio-Infante) and [Rocio's LinkedIn](https://www.linkedin.com/in/rocio-infante/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Faqls-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Faqls-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Faqls-client/lists"}