Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamalsoueidan/graphql-react-apollo
Using graphql to show example using organization and users simple CRUD operations with belong_to and has_many relationship
https://github.com/jamalsoueidan/graphql-react-apollo
graphql graphql-client graphql-server react react-apollo-graphql
Last synced: about 2 months ago
JSON representation
Using graphql to show example using organization and users simple CRUD operations with belong_to and has_many relationship
- Host: GitHub
- URL: https://github.com/jamalsoueidan/graphql-react-apollo
- Owner: jamalsoueidan
- License: mit
- Created: 2021-11-14T14:26:12.000Z (about 3 years ago)
- Default Branch: Main
- Last Pushed: 2021-11-19T01:06:53.000Z (about 3 years ago)
- Last Synced: 2023-03-10T19:29:46.157Z (almost 2 years ago)
- Topics: graphql, graphql-client, graphql-server, react, react-apollo-graphql
- Language: TypeScript
- Homepage:
- Size: 692 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Getting Started with Graphql + React + Apollo
I try to demostrate context + hoc in different use cases.
I use Material UI with Formik and Apollo Client.
You can see all the organizations, update any organization, add new organization, and delete organization.
Context is used in the [organization/list.tsx](https://github.com/jamalsoueidan/graphql-react-apollo/blob/Main/src/components/organization/list.tsx) [useOrganization](https://github.com/jamalsoueidan/graphql-react-apollo/blob/Main/src/data/organizations-context.tsx)
- Global shared state.
- When you want to share data between all nested components.
HOC is used in the [organization/add.tsx](https://github.com/jamalsoueidan/graphql-react-apollo/blob/Main/src/components/organization/add.tsx) [withOrganizations](https://github.com/jamalsoueidan/graphql-react-apollo/blob/Main/src/data/with-organizations.tsx)
- When you don't want to share data with all nested children.
- When you want to pick the component which receives the props.
- It will act as local storage for the specific component.
# References
[how-to-use-react-context-effectively](https://kentcdodds.com/blog/how-to-use-react-context-effectively)
[a-simple-graphql-example-with-relationships/](https://blog.tylerbuchea.com/a-simple-graphql-example-with-relationships/)
# Screenshot
