{"id":26233655,"url":"https://github.com/andytango/redux-postgrest","last_synced_at":"2025-04-22T12:11:08.899Z","repository":{"id":39947273,"uuid":"235859014","full_name":"andytango/redux-postgrest","owner":"andytango","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-06T02:35:59.000Z","size":712,"stargazers_count":28,"open_issues_count":22,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T15:01:37.767Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andytango.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-23T18:28:39.000Z","updated_at":"2024-04-30T05:49:04.000Z","dependencies_parsed_at":"2023-02-05T03:16:51.196Z","dependency_job_id":null,"html_url":"https://github.com/andytango/redux-postgrest","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andytango%2Fredux-postgrest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andytango%2Fredux-postgrest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andytango%2Fredux-postgrest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andytango%2Fredux-postgrest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andytango","download_url":"https://codeload.github.com/andytango/redux-postgrest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250237832,"owners_count":21397401,"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":"2025-03-13T01:16:59.464Z","updated_at":"2025-04-22T12:11:08.871Z","avatar_url":"https://github.com/andytango.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🐘 Redux-Postgrest  \n\n\u003ca href=\"https://www.npmjs.com/package/redux-postgrest\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/redux-postgrest.svg\" alt=\"Version\" /\u003e\n\u003c/a\u003e\n\nA library to make developing with React and postgREST as effortless as possible, by taking care of all the plumbing 🔧.\n\n[See the demo app!](https://github.com/andytango/redux-postgrest-demo)\n\n\n# Why?\n\nOne of the great things about [PostgREST](http://postgrest.org/) is that it can remove any indirection between your React application and your database, treating your data model itself as a *\"single, declarative source of truth\"*.\n\nRedux-PostgREST fully embraces this philsosophy. Your tables, views and functions are mapped to *redux action types* using PostgREST's own documentation endpoint. \n\nNow, when you want to query your database, all you have to do is just *dispatch redux actions*, and then *select the response data*! 👍 \n\n# 🧰 What's in the box \n\n- A middleware - *takes care of data fetching*\n- A reducer - *stores API requests and responses*\n\n![diagram](https://raw.githubusercontent.com/andytango/redux-postgrest/master/redux-postgrest.png)\n\nOptionally, to make life *even easier*:\n- Action creators\n- Selectors - *in development*\n- Hooks\n\n# 🏁 Quickstart\n\n## Install\n\n```sh\nyarn add redux-postgrest\n```\n\n## Configure\n```jsx\n// store.js\nimport { applyMiddleware, combineReducers, createStore } from \"redux\";\nimport { connectPgRest } from \"redux-postgrest\";\n\nconst { reducer, middleware } = connectPgRest({\n  url: \"http://localhost:8000\" // Your postgREST server\n});\n\nconst store = createStore(\n  combineReducers({ api: reducer }),\n  applyMiddleware(middleware)\n);\n\nexport default store;\n```\n\n## Make a table\n\n```sql\n-- your postgres db:\n\nCREATE TABLE my_table_name (\n  example_id       INTEGER PRIMARY KEY GENERATED ALWAYS AS IDENTITY,\n  example_text     TEXT,\n  example_datetime TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP\n);\n\nINSERT INTO my_table_name (example_text) VALUES ('Hello world!');\n```\n\n## Dispatch\n\n```jsx\n// Component.js\n\nconst {\n  useDispatchGet,\n  useDispatchPost,\n  useDispatchPatch,\n  useDispatchDelete\n} = makePgRestHooks(\"my_table_name\"); // Your postgREST endpoint\n\nfunction MyComponent() {\n  const dispatch = useDispatchGet();\n  \n  useEffect(() =\u003e {\n    dispatch()\n  }, [dispatch]); // will only run after the component is first mounted\n  \n  // ...\n}\n\nexport default MyComponent;\n```\n\n## Select\n\n```jsx\n// Component.js\nimport React from 'react';\n\nconst {\n  useDispatchGet,\n  useDispatchPost,\n  useDispatchPatch,\n  useDispatchDelete\n} = makePgRestHooks(\"my_table_name\"); // Your postgREST endpoint\n\nfunction MyComponent() {\n  const dispatch = useDispatchGet();\n  \n  useEffect(() =\u003e {\n    dispatch();\n  }, [dispatch]);\n  \n  const myTableData = useSelector(\n    ({ api }) =\u003e api.my_table_name \u0026\u0026 api.my_table_name.GET.body\n  );\n  \n  if(myTableData \u0026\u0026 myTableData.length) {\n    return \u003cspan\u003e{myTableData[0].example_text}\u003c/span\u003e // Should say \"Hello world!\"\n  }\n  \n  return null;\n}\n\nexport default MyComponent;\n```\n\n## License\n\n[MIT](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandytango%2Fredux-postgrest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandytango%2Fredux-postgrest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandytango%2Fredux-postgrest/lists"}