{"id":13796478,"url":"https://github.com/TahaSh/qwikql","last_synced_at":"2025-05-13T00:30:52.676Z","repository":{"id":60809743,"uuid":"544957205","full_name":"TahaSh/qwikql","owner":"TahaSh","description":"A GraphQL client for Qwik framework.","archived":false,"fork":false,"pushed_at":"2023-11-25T08:36:22.000Z","size":311,"stargazers_count":51,"open_issues_count":4,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-07-08T02:31:19.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/TahaSh.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-10-03T14:32:15.000Z","updated_at":"2024-05-07T14:01:32.000Z","dependencies_parsed_at":"2023-11-25T09:50:12.213Z","dependency_job_id":null,"html_url":"https://github.com/TahaSh/qwikql","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"0e99ad02e8621289530ced2060ea6f9460152a77"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TahaSh%2Fqwikql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TahaSh%2Fqwikql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TahaSh%2Fqwikql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TahaSh%2Fqwikql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TahaSh","download_url":"https://codeload.github.com/TahaSh/qwikql/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213864401,"owners_count":15649317,"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":[],"created_at":"2024-08-03T23:01:10.842Z","updated_at":"2024-08-03T23:06:52.972Z","avatar_url":"https://github.com/TahaSh.png","language":"TypeScript","readme":"# QwikQL\n\nA GraphQL client for Qwik framework.\n\n---\n\n## Installation\n\n```bash\nnpm install qwikql graphql graphql-request\n```\n\nTo use it, wrap the root component with it, and specify the GraphQL server url using the `url` prop.\n\n```jsx\nimport { QwikQL } from 'qwikql'\n\nexport default component$(() =\u003e {\n  return (\n    \u003cQwikQL\n      url=\"http://localhost:4000/graphql\"\n    \u003e\n      \u003cQwikCity\u003e\n        // ...\n      \u003c/QwikCity\u003e\n    \u003c/QwikQL\u003e\n  )\n})\n```\n\n## Queries\nQwikQL provides a use hook named `useQuery(QUERY)`. It takes the query as a parameter, and it returns `{ executeQuery$ }`.\n\n`executeQuery$({ variables })` is a QRL function that takes the variables (like `{ variables: { id: 'example-id' } }`) and returns a promise with the results.\n\nThe best way to fetch data in Qwik is using `\u003cResource /\u003e` component. To utilize `\u003cResource /\u003e`, you have to create a resource using `useResource$` hook function.\n\nHere's an example:\n\n```jsx\nimport { useQuery } from 'qwikql'\nimport { gql } from 'graphql-request'\n\nexport default component$(() =\u003e {\n  const ITEM_BY_ID = gql`\n    query itemById($itemId: ID) {\n      itemById(itemId: $itemId) {\n        id\n        title\n      }\n    }\n  `\n\n  const { executeQuery$ } = useQuery(ITEM_BY_ID)\n\n  const item = useResource$(async () =\u003e\n    await executeQuery$({\n      variables: { itemId: 'example-item-id' }\n    })\n  )\n\n  return (\n    \u003c\u003e\n      \u003cResource\n        value={item}\n        onPending={() =\u003e (\n          \u003c\u003eLoading Item\u003c/\u003e\n        )}\n        onResolved={(data: any) =\u003e (\n          \u003c\u003e{ data.itemById.title }\u003c/\u003e\n        )}\n        onRejected={(error) =\u003e (\n          \u003c\u003eError fetching item: {error}\u003c/\u003e\n        )}\n      /\u003e\n    \u003c/\u003e\n  )\n})\n```\n\n## Refetching\n\nSince we are using `useResource$` for fetching the data, we just need to retrigger it when we want to refetch the data.\n\n`useResource$` provides us with `track` function that watches a specific property in a store, and when that property is updated, then `useResource$` is called again.\n\nSo, we can use this feature refetch data when the query variables (or any state we want) change.\n\n```jsx\nimport { useQuery } from 'qwikql'\nimport { ITEM_BY_ID } from '~/graphql/queries'\nimport { useStore } from '@builder.io/qwik'\n\nexport default component$(() =\u003e {\n  const itemId = useStore({\n    value: 'example-item-id'\n  })\n  const { executeQuery$ } = useQuery(ITEM_BY_ID)\n\n  const item = useResource$(async ({ track }) =\u003e {\n    track(itemId, 'value')\n    return await executeQuery$({\n      variables: { itemId: itemId.value }\n    })\n  })\n\n  return (\n    \u003c\u003e\n      \u003cResource\n        value={item}\n        onPending={() =\u003e (\n          \u003c\u003eLoading Item\u003c/\u003e\n        )}\n        onResolved={(data: any) =\u003e (\n          \u003c\u003e{ data.itemById.title }\u003c/\u003e\n        )}\n        onRejected={(error) =\u003e (\n          \u003c\u003eError fetching item: {error}\u003c/\u003e\n        )}\n      /\u003e\n    \u003c/\u003e\n  )\n})\n```\n\n### Manual refetching\n\nIn many cases, we want to refetch the query after a mutation is called, or when something happens, like a button click. In these cases, we wouldn't watch the query variables, instead we will watch a \"refetch counter\" that we create.\n\nSo, we'll create a store for refetch count, and start watching it in `useResource$`. To trigger refetch, we just need to increment that counter.\n\n```jsx\nimport { useQuery } from 'qwikql'\nimport { ITEM_BY_ID } from '~/graphql/queries'\nimport { useStore } from '@builder.io/qwik'\n\nexport default component$(() =\u003e {\n  // Create the refetch counter\n  const refetchCount = useStore({ value: 0 })\n\n  const { executeQuery$ } = useQuery(ITEM_BY_ID)\n\n  const item = useResource$(async ({ track }) =\u003e {\n    track(refetchCount, 'value')\n    return await executeQuery$({\n      variables: { itemId: 'example-item-id' }\n    })\n  })\n\n  return (\n    \u003c\u003e\n      // Refetch on this button click\n      \u003cbutton\n        onClick$={() =\u003e {\n          refetchCount.value++\n        }}\n      \u003e\n        Refetch\n      \u003c/button\u003e\n\n      \u003cResource\n        value={item}\n        onPending={() =\u003e (\n          \u003c\u003eLoading Item\u003c/\u003e\n        )}\n        onResolved={(data: any) =\u003e (\n          \u003c\u003e{ data.itemById.title }\u003c/\u003e\n        )}\n        onRejected={(error) =\u003e (\n          \u003c\u003eError fetching item: {error}\u003c/\u003e\n        )}\n      /\u003e\n    \u003c/\u003e\n  )\n})\n```\n\n## Mutations\n\nQwikQL provides `useMutation(MUTATION)` hook for GraphQL mutations. It takes the mutation as a parameter, and it returns `{ mutate$, result }`.\n\n`mutate$(variables)` is a QRL function that takes a variables object to execute the mutation.\n\n`result` is a store object that contains these variables: `{ data, loading, error }`.\n\nHere's an example:\n\n```jsx\nimport { useMutation } from 'qwikql'\nimport { gql } from 'graphql-request'\n\nexport const ADD_ITEM = gql`\n  mutation addItem($input: AddItemInput!) {\n    addItem(input: $input) {\n      id\n      title\n    }\n  }\n`\n\nexport default component$(() =\u003e {\n  const { mutate$, result } = useMutation(ADD_ITEM)\n\n  return (\n    \u003c\u003e\n      { result.loading \u0026\u0026 \u003cdiv\u003eAdding Item...\u003c/div\u003e}\n      { result.error \u0026\u0026 \u003cdiv\u003eERROR: { result.error.message }\u003c/div\u003e}\n      \u003cinput\n        onKeyPress$={async (event) =\u003e {\n          if (event.key === 'Enter') {\n            const value = (event.target as HTMLInputElement).value\n            await mutate$({\n              input: {\n                title: value\n              }\n            })\n          }\n        }}\n      /\u003e\n    \u003c/\u003e\n  )\n})\n```\n\n## Setting Headers\n\nThere are two ways to set headers for your GraphQL operations, either directly as a prop to `\u003cQwikQL /\u003e`:\n\n```jsx\n\u003cQwikQL\n  url=\"http://localhost:4000/graphql\"\n  headers={{\n    authorization: 'auth-key'\n  }}\n\u003e\n\u003c/QwikQL\u003e\n```\n\nOr you can set it using `useHeaders()` hook function:\n\n```jsx\nimport { useHeaders } from 'qwikql'\n\nexport default component$(() =\u003e {\n  const setHeaders = useHeaders()\n  setHeader({\n    authorization: 'auth-key'\n  })\n})\n```\n\nThe latter is useful when you get the header values later in other components. A common example is setting the `authorization` after reading the token from the cookies.\n","funding_links":[],"categories":["Libraries","Library"],"sub_categories":["External Resources"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTahaSh%2Fqwikql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTahaSh%2Fqwikql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTahaSh%2Fqwikql/lists"}