{"id":15643022,"url":"https://github.com/ecyrbe/zodios-react","last_synced_at":"2025-04-04T08:05:38.246Z","repository":{"id":36962846,"uuid":"488340875","full_name":"ecyrbe/zodios-react","owner":"ecyrbe","description":"React hooks for zodios","archived":false,"fork":false,"pushed_at":"2024-10-29T19:01:08.000Z","size":1053,"stargazers_count":64,"open_issues_count":21,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T21:16:25.491Z","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/ecyrbe.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-03T19:39:33.000Z","updated_at":"2024-09-05T08:40:57.000Z","dependencies_parsed_at":"2023-01-17T08:47:31.191Z","dependency_job_id":"4d42f6ca-f61a-4abd-acfc-7c7f2acbf718","html_url":"https://github.com/ecyrbe/zodios-react","commit_stats":{"total_commits":664,"total_committers":6,"mean_commits":"110.66666666666667","dds":0.3975903614457831,"last_synced_commit":"98552e3787af60d8488b0271019e3085e6089879"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecyrbe%2Fzodios-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecyrbe%2Fzodios-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecyrbe%2Fzodios-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecyrbe%2Fzodios-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecyrbe","download_url":"https://codeload.github.com/ecyrbe/zodios-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247141412,"owners_count":20890627,"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-10-03T11:58:39.913Z","updated_at":"2025-04-04T08:05:38.220Z","avatar_url":"https://github.com/ecyrbe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" \u003ch1 align=\"center\"\u003eZodios React\u003c/h1\u003e\n \u003cp align=\"center\"\u003e\n   \u003ca href=\"https://github.com/ecyrbe/zodios-react\"\u003e\n     \u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/ecyrbe/zodios-react/main/docs/logo.svg\" width=\"128px\" alt=\"Zodios logo\"\u003e\n   \u003c/a\u003e\n \u003c/p\u003e\n \n \u003cp align=\"center\"\u003e\n    React hooks for zodios backed by \u003ca src=\"https://react-query.tanstack.com/\" \u003ereact-query\u003c/a\u003e\n \u003c/p\u003e\n \n \u003cp align=\"center\"\u003e\n   \u003ca href=\"https://www.npmjs.com/package/@zodios/react\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@zodios/react.svg\" alt=\"langue typescript\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/@zodios/react\"\u003e\n   \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dw/@zodios/react\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/ecyrbe/zodios-react/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/ecyrbe/zodios-react\"\u003e   \n   \u003c/a\u003e\n   \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/workflow/status/ecyrbe/zodios-react/CI\"\u003e\n \u003c/p\u003e\n\n# Install\n\n```bash\n\u003e npm install @zodios/react\n```\n\nor\n\n```bash\n\u003e yarn add @zodios/react\n```\n\n# Usage\n\nZodios comes with a Query and Mutation hook helper.  \nIt's a thin wrapper around React-Query but with zodios auto completion.\n  \nZodios query hook also returns an invalidation helper to allow you to reset react query cache easily\n  \n```typescript\nimport React from \"react\";\nimport { QueryClient, QueryClientProvider } from \"react-query\";\nimport { Zodios, asApi } from \"@zodios/core\";\nimport { ZodiosHooks } from \"@zodios/react\";\nimport { z } from \"zod\";\n\n// you can define schema before declaring the API to get back the type\nconst userSchema = z\n  .object({\n    id: z.number(),\n    name: z.string(),\n  })\n  .required();\n\nconst createUserSchema = z\n  .object({\n    name: z.string(),\n  })\n  .required();\n\nconst usersSchema = z.array(userSchema);\n\n// you can then get back the types\ntype User = z.infer\u003ctypeof userSchema\u003e;\ntype Users = z.infer\u003ctypeof usersSchema\u003e;\n\nconst api = asApi([\n  {\n    method: \"get\",\n    path: \"/users\",\n    description: \"Get all users\",\n    parameters: [\n      {\n        name: \"q\",\n        type: \"Query\",\n        schema: z.string(),\n      },\n      {\n        name: \"page\",\n        type: \"Query\",\n        schema: z.string().optional(),\n      },\n    ],\n    response: usersSchema,\n  },\n  {\n    method: \"get\",\n    path: \"/users/:id\",\n    description: \"Get a user\",\n    response: userSchema,\n  },\n  {\n    method: \"post\",\n    path: \"/users\",\n    description: \"Create a user\",\n    parameters: [\n      {\n        name: \"body\",\n        type: \"Body\",\n        schema: createUserSchema,\n      },\n    ],\n    response: userSchema,\n  },\n]);\nconst baseUrl = \"https://jsonplaceholder.typicode.com\";\n\nconst zodios = new Zodios(baseUrl, api);\nconst zodiosHooks = new ZodiosHooks(\"jsonplaceholder\", zodios);\n\nconst Users = () =\u003e {\n  const {\n    data: users,\n    isLoading,\n    error,\n    invalidate: invalidateUsers, // zodios also provides invalidation helpers\n  } = zodiosHooks.useQuery(\"/users\");\n  const { mutate } = zodiosHooks.useMutation(\"post\", \"/users\", undefined, {\n    onSuccess: () =\u003e invalidateUsers(),\n  });\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003eUsers\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e mutate({ name: \"john doe\" })}\u003eadd user\u003c/button\u003e\n      {isLoading \u0026\u0026 \u003cdiv\u003eLoading...\u003c/div\u003e}\n      {error \u0026\u0026 \u003cdiv\u003eError: {(error as Error).message}\u003c/div\u003e}\n      {users \u0026\u0026 (\n        \u003cul\u003e\n          {users.map((user) =\u003e (\n            \u003cli key={user.id}\u003e{user.name}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      )}\n    \u003c/\u003e\n  );\n};\n\n// on another file\nconst queryClient = new QueryClient();\n\nexport const App = () =\u003e {\n  return (\n    \u003cQueryClientProvider client={queryClient}\u003e\n      \u003cUsers /\u003e\n    \u003c/QueryClientProvider\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecyrbe%2Fzodios-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecyrbe%2Fzodios-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecyrbe%2Fzodios-react/lists"}