{"id":13727143,"url":"https://github.com/croutonn/graphql-codegen-plugin-typescript-swr","last_synced_at":"2025-04-12T15:36:37.476Z","repository":{"id":37833666,"uuid":"303681581","full_name":"croutonn/graphql-codegen-plugin-typescript-swr","owner":"croutonn","description":"A GraphQL code generator plug-in that automatically generates utility functions for SWR.","archived":false,"fork":false,"pushed_at":"2025-04-01T19:51:10.000Z","size":1444,"stargazers_count":101,"open_issues_count":17,"forks_count":11,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-03T15:11:18.020Z","etag":null,"topics":["graphql","graphql-code-generator","nextjs","react","stale-while-revalidate","swr"],"latest_commit_sha":null,"homepage":"","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/croutonn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-13T11:32:20.000Z","updated_at":"2025-01-07T09:00:14.000Z","dependencies_parsed_at":"2024-04-06T00:21:40.398Z","dependency_job_id":"15e602a0-3701-4f29-a5f2-06c513828799","html_url":"https://github.com/croutonn/graphql-codegen-plugin-typescript-swr","commit_stats":{"total_commits":341,"total_committers":7,"mean_commits":"48.714285714285715","dds":"0.28739002932551316","last_synced_commit":"61c44662029cc6786bd2f5e98ea4f5a7c9ee84ae"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Fgraphql-codegen-plugin-typescript-swr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Fgraphql-codegen-plugin-typescript-swr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Fgraphql-codegen-plugin-typescript-swr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croutonn%2Fgraphql-codegen-plugin-typescript-swr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/croutonn","download_url":"https://codeload.github.com/croutonn/graphql-codegen-plugin-typescript-swr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590379,"owners_count":21129802,"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":["graphql","graphql-code-generator","nextjs","react","stale-while-revalidate","swr"],"created_at":"2024-08-03T01:03:41.445Z","updated_at":"2025-04-12T15:36:37.441Z","avatar_url":"https://github.com/croutonn.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# graphql-codegen-plugin-typescript-swr \u003c!-- omit in toc --\u003e\n\nA [GraphQL code generator](https://graphql-code-generator.com/) plug-in that automatically generates utility functions for [SWR](https://swr.vercel.app/).\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [API Reference](#api-reference)\n  - [`excludeQueries`](#excludequeries)\n  - [`useSWRInfinite`](#useswrinfinite)\n  - [`autogenSWRKey`](#autogenswrkey)\n- [Config Example](#config-example)\n- [Usage Examples](#usage-examples)\n  - [Pagination](#pagination)\n  - [Authorization](#authorization)\n  - [Next.js](#nextjs)\n\n## API Reference\n\n### `excludeQueries`\n\ntype: `string | string[]` default: `\"\"`\n\nExclude queries that are matched by micromatch (case-sensitive).\n\n### `useSWRInfinite`\n\ntype: `string | string[]` default: `\"\"`\n\nAdd `useSWRInfinite()` wrapper for the queries that are matched by micromatch (case-sensitive).\n\n### `autogenSWRKey`\n\ntype: `boolean` default: `false`\n\nGenerate key to use `useSWR()` automatically.  \nBut, ​the cache may not work unless you separate the variables object into an external file and use it, or use a primitive type for the value of each field.\n\n## Config Example\n\n```yaml\ngenerates:\n  path/to/graphql.ts:\n    schema: 'schemas/github.graphql'\n    documents: 'src/services/github/**/*.graphql'\n    plugins:\n      - typescript\n      - typescript-operations\n      # Put `plugin-typescript-swr` below `typescript-graphql-request`\n      - typescript-graphql-request\n      - plugin-typescript-swr\nconfig:\n  rawRequest: false\n  excludeQueries:\n    - foo*\n    - bar\n  useSWRInfinite:\n    - hoge\n    - bar{1,3}\n  autogenSWRKey: true\n```\n\n## Usage Examples\n\nFor the given input:\n\n```graphql\nquery continents {\n  continents {\n    name\n    countries {\n      ...CountryFields\n    }\n  }\n}\n\nfragment CountryFields on Country {\n  name\n  currency\n}\n```\n\nIt generates SDK you can import and wrap your GraphQLClient instance, and get fully-typed SDK based on your operations:\n\n```tsx\nimport { GraphQLClient } from 'graphql-request'\nimport { getSdkWithHooks } from './sdk'\n\nfunction Continents() {\n  const client = new GraphQLClient('https://countries.trevorblades.com/')\n  const sdk = getSdkWithHooks(client)\n\n  const { data, error } = sdk.useContinents('Continents')\n\n  if (error) return \u003cdiv\u003efailed to load\u003c/div\u003e\n  if (!data) return \u003cdiv\u003eloading...\u003c/div\u003e\n\n  return (\n    \u003cul\u003e\n      {data.continents.map((continent) =\u003e (\n        \u003cli\u003e{continent.name}\u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  )\n}\n```\n\n### Pagination\n\n#### codegen.yaml \u003c!-- omit in toc --\u003e\n\n```yaml\nconfig:\n  useSWRInfinite:\n    - MyQuery\n```\n\n#### Functional Component \u003c!-- omit in toc --\u003e\n\n```tsx\nconst { data, size, setSize } = sdk.useMyQueryInfinite(\n  'id_for_caching',\n  (pageIndex, previousPageData) =\u003e {\n    if (previousPageData \u0026\u0026 !previousPageData.search.pageInfo.hasNextPage)\n      return null\n    return [\n      'after',\n      previousPageData ? previousPageData.search.pageInfo.endCursor : null,\n    ]\n  },\n  variables, // GraphQL Query Variables\n  config // Configuration of useSWRInfinite\n)\n```\n\n### Authorization\n\n```typescript\nimport { GraphQLClient } from 'graphql-request'\nimport { getSdkWithHooks } from './sdk'\nimport { getJwt } from './jwt'\n\nconst getAuthorizedSdk = () =\u003e {\n  const headers: Record\u003cstring, string\u003e = { 'Content-Type': 'application/json' }\n  const jwt = getJwt()\n  if (jwt) {\n    headers.Authorization = `Bearer ${jwt}`\n  }\n  return getSdkWithHooks(\n    new GraphQLClient(`${process.env.NEXT_PUBLIC_API_URL}`, {\n      headers,\n    })\n  )\n}\n\nexport default getAuthorizedSdk\n```\n\n### Next.js\n\n```tsx\n// pages/posts/[slug].tsx\nimport { GetStaticProps, NextPage } from 'next'\nimport ErrorPage from 'next/error'\nimport { useRouter } from 'next/router'\nimport Article from '../components/Article'\nimport sdk from '../sdk'\nimport { GetArticleQuery } from '../graphql'\n\ntype StaticParams = { slug: string }\ntype StaticProps = StaticParams \u0026 {\n  initialData: {\n    articleBySlug: NonNullable\u003cGetArticleQuery['articleBySlug']\u003e\n  }\n}\ntype ArticlePageProps = StaticProps \u0026 { preview?: boolean }\n\nexport const getStaticProps: GetStaticProps\u003cStaticProps, StaticParams\u003e = async ({\n  params,\n  preview = false,\n  previewData\n}) =\u003e {\n  if (!params) {\n    throw new Error('Parameter is invalid!')\n  }\n\n  const { articleBySlug: article } = await sdk().GetArticle({\n    slug: params.slug,\n  })\n\n  if (!article) {\n    throw new Error('Article is not found!')\n  }\n\n  const props: ArticlePageProps = {\n    slug: params.slug,\n    preview,\n    initialData: {\n      articleBySlug: article\n    }\n  }\n\n  return {\n    props: preview\n      ? {\n          ...props,\n          ...previewData,\n        }\n      : props,\n  }\n})\n\nexport const ArticlePage: NextPage\u003cArticlePageProps\u003e = ({ slug, initialData, preview }) =\u003e {\n  const router = useRouter()\n  const { data: { article }, mutate: mutateArticle } = sdk().useGetArticle(\n    `GetArticle/${slug}`, { slug }, { initialData }\n  )\n\n  if (!router.isFallback \u0026\u0026 !article) {\n    return \u003cErrorPage statusCode={404} /\u003e\n  }\n\n  // because of typescript problem\n  if (!article) {\n    throw new Error('Article is not found!')\n  }\n\n  return (\n    \u003cLayout preview={preview}\u003e\n      \u003c\u003e\n        \u003cHead\u003e\n          \u003ctitle\u003e{article.title}\u003c/title\u003e\n        \u003c/Head\u003e\n        \u003cArticle article={article} /\u003e\n      \u003c/\u003e\n    \u003c/Layout\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcroutonn%2Fgraphql-codegen-plugin-typescript-swr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcroutonn%2Fgraphql-codegen-plugin-typescript-swr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcroutonn%2Fgraphql-codegen-plugin-typescript-swr/lists"}