{"id":47669,"library":"fetchql","title":"FetchQL","description":"A lightweight GraphQL query client using the Fetch API for both browser and Node.js environments. Current version 3.0.0 (published 2019-10-28) adds TypeScript declaration file. Works with any fetch polyfill like node-fetch. Focuses on simplicity with built-in interceptors for request/response handling, request state callbacks, and enum type caching. Differentiates from Apollo and Relay by being minimal (no cache, no state management), ideal for small projects or when using GraphQL with vanilla fetch.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/gucheen/FetchQL","tags":["javascript","grahpql","fetch","typescript"],"install":[{"cmd":"npm install fetchql","lang":"bash","label":"npm"},{"cmd":"yarn add fetchql","lang":"bash","label":"yarn"},{"cmd":"pnpm add fetchql","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package exports default export. Named import 'FetchQL' is incorrect. Also supports require: const FetchQL = require('fetchql'). ESM support since v2.2.0.","wrong":"const { FetchQL } = require('fetchql')","symbol":"default (FetchQL class)","correct":"import FetchQL from 'fetchql'"},{"note":"Operation name is required; without it query will fail. Variables are optional but must be object if provided.","wrong":"new FetchQL().query({ query: '...' })","symbol":"FetchQL.query()","correct":"import FetchQL from 'fetchql';\nconst client = new FetchQL({ url: 'http://localhost:4000/graphql' });\nclient.query({ operationName: 'GetUser', query: '...', variables: {} }).then(data => ...)"},{"note":"Interceptors can be a single object or array of objects. Each interceptor must have functions: request, requestError, response, responseError.","wrong":"\ninterceptors: { request: () => {}, response: () => {} }","symbol":"FetchQL interceptors","correct":"import FetchQL from 'fetchql';\nconst client = new FetchQL({\n  url: '...',\n  interceptors: [{\n    request: (url, config) => [url, config],\n    response: response => response\n  }]\n})"}],"quickstart":{"code":"import FetchQL from 'fetchql';\n\nconst client = new FetchQL({\n  url: process.env.GRAPHQL_URL ?? 'http://localhost:4000/graphql',\n  headers: { Authorization: `Bearer ${process.env.TOKEN ?? ''}` },\n  onStart: (queueLength) => console.log(`Queue started, length: ${queueLength}`),\n  onEnd: (queueLength) => console.log(`Queue ended, length: ${queueLength}`),\n  omitEmptyVariables: true\n});\n\nclient.query({\n  operationName: 'GetUser',\n  query: `\n    query GetUser($id: ID!) {\n      user(id: $id) {\n        id\n        name\n      }\n    }\n  `,\n  variables: { id: '123' }\n})\n  .then(data => console.log('User:', data))\n  .catch(err => console.error('GraphQL error:', err));\n\n// Get enum types\nclient.getEnumTypes(['UserRole', 'Status'])\n  .then(enumMap => console.log('Enums:', enumMap))\n  .catch(err => console.error('Enum fetch error:', err));\n\n// Add interceptor dynamically\nconst removeInterceptor = client.addInterceptors([{\n  request: (url, config) => {\n    config.headers['X-Custom'] = 'value';\n    return [url, config];\n  },\n  response: response => response\n}]);\n\n// Remove the added interceptor later\nremoveInterceptor();\n\n// Clear all interceptors\nclient.clearInterceptors();","lang":"typescript","description":"Complete example: initialize FetchQL client with URL, auth headers, and callbacks; execute a query; fetch enum types; add dynamic interceptors and remove them."},"warnings":[{"fix":"Always include operationName in the query call: { operationName: 'MyQuery', query: '...' }","message":"operationName must be provided in query options; omitting it will cause query to reject.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Update imports to use 'fetchql' (default module resolution) instead of relying on specific file paths.","message":"Since v2.0.0, source code moved to ./src and distributed file to ./lib; file is now unminified.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Install node-fetch (or similar) and ensure global fetch is defined: require('node-fetch');","message":"The package requires a fetch polyfill on Node.js (e.g., node-fetch). Missing fetch will cause runtime errors.","severity":"gotcha","affected_versions":"*"},{"fix":"Do not use omitEmptyVariables if you need to pass 0 or false as variables.","message":"omitEmptyVariables option (global or per-query) removes null or empty string ('') properties from variables; unexpected deletion of falsy values like 0 or false.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"search_vec":"'-10':22 '-28':23 '2019':21 '3.0.0':19 'add':24 'api':10 'apollo':57 'browser':13 'built':42 'built-in':41 'cach':54,64 'callback':50 'client':6 'current':17 'declar':26 'differenti':55 'enum':52 'environ':16 'fetch':9,31,36,78,81 'fetchql':1 'file':27 'focus':37 'grahpql':80 'graphql':4,75 'handl':47 'ideal':68 'interceptor':44 'javascript':79 'lightweight':3 'like':33 'manag':67 'minim':62 'node':35 'node-fetch':34 'node.js':15 'polyfil':32 'project':71 'publish':20 'queri':5 'relay':59 'request':48 'request/response':46 'simplic':39 'small':70 'state':49,66 'type':53 'typescript':25,82 'use':7,74 'vanilla':77 'version':18 'work':28","created_at":"2026-06-07T16:52:41.594313+00:00","updated_at":"2026-06-07T16:52:41.594313+00:00","problems":[{"fix":"Ensure query() is called with an object containing operationName, query, and optionally variables: client.query({ operationName: '...', query: '...' })","cause":"query() called without options object or with undefined.","error":"TypeError: Cannot destructure property 'operationName' of 'options' as it is undefined."},{"fix":"Check GraphQL server response body for errors; ensure query syntax is correct and variables match schema.","cause":"GraphQL server returned error (e.g., missing variables or invalid query).","error":"Unhandled promise rejection: Response not OK: 400 Bad Request"},{"fix":"Install node-fetch and import it: import fetch from 'node-fetch'; global.fetch = fetch;","cause":"Running in Node.js without a fetch polyfill.","error":"fetch is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/gucheen/FetchQL#readme","github":"https://github.com/gucheen/FetchQL","docs":null,"changelog":null,"pypi":null,"npm":"fetchql","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}