{"id":16367533,"url":"https://github.com/alexmacarthur/graphql-quest","last_synced_at":"2025-03-21T01:31:09.537Z","repository":{"id":41748821,"uuid":"304794175","full_name":"alexmacarthur/graphql-quest","owner":"alexmacarthur","description":"Ultra-minimal library for making GraphQL requests in the browser and Node (with a quick polyfill). ","archived":false,"fork":false,"pushed_at":"2022-12-13T02:19:23.000Z","size":576,"stargazers_count":20,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T02:50:10.574Z","etag":null,"topics":["gql","graphql","graphql-client","nodejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexmacarthur.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-17T04:09:11.000Z","updated_at":"2023-06-14T00:15:00.000Z","dependencies_parsed_at":"2023-01-28T05:00:24.028Z","dependency_job_id":null,"html_url":"https://github.com/alexmacarthur/graphql-quest","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmacarthur%2Fgraphql-quest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmacarthur%2Fgraphql-quest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmacarthur%2Fgraphql-quest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexmacarthur%2Fgraphql-quest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexmacarthur","download_url":"https://codeload.github.com/alexmacarthur/graphql-quest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221810744,"owners_count":16884185,"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":["gql","graphql","graphql-client","nodejs"],"created_at":"2024-10-11T02:50:10.990Z","updated_at":"2024-10-28T08:59:41.381Z","avatar_url":"https://github.com/alexmacarthur.png","language":"TypeScript","readme":"# Quest\n\nA minimal library for making GraphQL requests in JavaScript, coming in at [\u003c 700 bytes gzipped](https://bundlephobia.com/result?p=graphql-quest).\n\n## Why?\n\nI needed an ultra-light, minimally-scoped client for talking to a GraphQL API. Prisma's [graphql-request](https://github.com/prisma-labs/graphql-request) has the feature set I needed, and it's pretty small in size, but I wanted to go even thinner. For _most_ use cases, Quest has an extremely similar feature set with a gzipped size that's ~9.5 times smaller than Prisma's alternative.\n\n## Installation\n\n### Package Manager\n\n`npm install graphql-quest` or `yarn add graphql-quest`\n\n### CDN\n\n[Grab the link](https://www.jsdelivr.com/package/npm/graphql-quest) for the latest version and load it via `\u003cscript\u003e` tag.\n\n## Simplest Usage\n\nQuest provides a simple function for sending quick queries and doing something with the [returned payload](#returned-payload).\n\n```js\nimport { quest } from \"graphql-quest\";\n\nconst query = `\n  {\n    comments(domain: \"macarthur.me\") {\n      createdAt\n      name\n      content\n    }\n  }\n`;\n\nquest(\"http://some-domain.com/graphql\", query).then((result) =\u003e {\n  console.log(result);\n\n  // result will be formed as such:\n  // {\n  //   data?: {},\n  //   errors?: []\n  // }\n});\n```\n\nYou can also provide a `variables` object to be used with a respective query or mutation.\n\n```js\nimport { quest } from \"graphql-quest\";\n\nconst query = `\n  query Comments($domain: String!) {\n    comments(domain: $domain) {\n      createdAt\n      name\n      content\n    }\n  }\n`;\n\nconst variables = {\n  domain: \"macarthur.me\",\n};\n\nquest(\"http://some-domain.com/graphql\", query, variables).then((result) =\u003e {\n  console.log(result);\n});\n```\n\n## More Complicated Usage\n\nIf you're going to be making repeated requests to the same server, you can preserve your endpoint, headers, etc. by creating a `QuestClient` instance and making queries with `.send()`.\n\n```js\nimport { QuestClient } from \"graphql-quest\";\n\nconst client = QuestClient({\n  endpoint: \"http://some-domain.com/graphql\",\n  headers: {\n    \"x-api-key\": \"ABC-123\",\n  },\n});\n\nconst query = `\n  query Comments($domain: String!) {\n    comments(domain: $domain) {\n      createdAt\n      name\n      content\n    }\n  }\n`;\n\nconst variables = {\n  domain: \"macarthur.me\",\n};\n\nclient.send(query, variables).then((result) =\u003e {\n  console.log(result);\n});\n```\n\n## Returned Payload\n\nEvery request (even those that throw exceptions) will return an object containing `data`, `errors`, or both. This pattern is generally intended to stay in line with the [GraphQL specification](https://graphql.org/learn/serving-over-http/#response), but doesn't require that you `.catch()` any errors on your own. Instead, exceptions that are thrown are represented in the `errors` array.\n\n```ts\n{\n  data?: object;\n  errors?: any[];\n}\n```\n\nSo, checking the success of the request can be basically performed by checking if the `errors` property exists on the returned payload:\n\n```js\nimport { quest } from \"grahpql-quest\";\n\n(async () =\u003e {\n  const query = `your query`;\n  const variables = { your: \"variables\" };\n\n  const result = await quest(\n    \"http://some-domain.com/graphql\",\n    query,\n    variables\n  );\n\n  if (result.errors) {\n    console.log(\"Something went wrong!\");\n  }\n})();\n```\n\n## POST vs. GET\n\nBy default, requests are sent via `POST`, and the query \u0026 variables are sent along with the request body. If you'd like to send them via `GET`, set the `method` parameter accordingly. Instead, the query and variables will be parsed and attached as query string parameters to the endpoint, preserving any parameters that might already be set on the URL.\n\n```js\nimport { quest, QuestClient } from \"graphql-quest\";\n\nconst client = QuestClient({\n  endpoint: \"http://some-domain.com/graphql\",\n  method: \"GET\",\n  headers: {\n    \"x-api-key\": \"ABC-123\",\n  },\n});\n\n// or...\n\nconst result = await quest(\"http://some-domain.com/graphql\", query, variables, {\n  method: \"GET\",\n});\n```\n\n## Usage in Node\n\nYou'll need to polyfill the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) before using this library in Node. I tend to use [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch), but it's up to you.\n\n```js\nrequire(\"isomorphic-fetch\");\nconst { quest } = require(\"graphql-quest\");\n\n// The rest of your code...\n```\n\n## Usage w/o a Bundler\n\nIf not using the ES module, you can access `quest` or `QuestClient` on the global `Quest` object after loading the source in the browser.\n\n```html\n\u003cscript src=\"./dist/quest.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { quest, QuestClient } = window.Quest;\n\n  // ... the rest of your code.\n\u003c/script\u003e\n```\n\n## Options\n\n```ts\nquest(\n  endpoint: string,\n  query: string,\n  variables?: object,\n  fetchOptions?: object\n);\n```\n\n| Option       | Description                                                                                                                 |\n| ------------ | --------------------------------------------------------------------------------------------------------------------------- |\n| endpoint     | the endpoint that'll be hit for the request                                                                                 |\n| query        | the query or mutation you're firing                                                                                         |\n| variables    | variables to be supplied to your query or mutation                                                                          |\n| fetchOptions | additional options to be passed into the `fetch` implementation under the hood (currently only supports headers and method) |\n\n```ts\nQuestClient({\n  endpoint,\n  method,\n  headers,\n} : {\n  endpoint: string,\n  method?: string,\n  headers?: object\n})\n```\n\n| Option   | Description                                         |\n| -------- | --------------------------------------------------- |\n| endpoint | the endpoint that'll be hit for the request         |\n| method   | HTTP method for sending request (default is `POST`) |\n| headers  | headers to include in request                       |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmacarthur%2Fgraphql-quest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexmacarthur%2Fgraphql-quest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmacarthur%2Fgraphql-quest/lists"}