{"id":18768559,"url":"https://github.com/dacili/graphql-react","last_synced_at":"2025-07-16T18:40:07.007Z","repository":{"id":171369307,"uuid":"647742445","full_name":"Dacili/GraphQL-React","owner":"Dacili","description":"REST vs GraphQL? (App in React and .Net core 7)","archived":false,"fork":false,"pushed_at":"2024-08-09T15:59:54.000Z","size":882,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-20T23:18:35.544Z","etag":null,"topics":["apollo-client","dotnet-7","dotnet-core","graphql","hot-chocolate","react-18","rsuite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Dacili.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-31T12:30:51.000Z","updated_at":"2024-08-09T16:09:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"068f238f-ae3a-4fa9-956b-80e0b9b231dc","html_url":"https://github.com/Dacili/GraphQL-React","commit_stats":null,"previous_names":["dacili/graphql"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Dacili/GraphQL-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FGraphQL-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FGraphQL-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FGraphQL-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FGraphQL-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dacili","download_url":"https://codeload.github.com/Dacili/GraphQL-React/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FGraphQL-React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265531406,"owners_count":23783230,"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":["apollo-client","dotnet-7","dotnet-core","graphql","hot-chocolate","react-18","rsuite"],"created_at":"2024-11-07T19:13:08.323Z","updated_at":"2025-07-16T18:40:06.957Z","avatar_url":"https://github.com/Dacili.png","language":"JavaScript","readme":"If you want first to check readme about **React** check this link https://github.com/Dacili/GraphQL/blob/master/GraphQLwithReact/GraphQLwithReact/ClientApp/src/README.md\n\n## About app\n- Application is created using **React 18** for the frontend part,  \n- and **.Net Core .NET 7** for the backend.  \n- **Rsuite** UI library is used for components.   \n- **Apollo client** is used in React for Graph QL. Use it to fetch, cache, and modify application data, all while automatically updating your UI. \n- **Hot chocolate** - open-source GraphQL server for the Microsoft .NET Platform.  \n#### URLs:  \n- Url for the frontend is: https://localhost:44419/  \n- for the backend https://localhost:7277/  \n- for the Graph QL https://localhost:7277/graphql/  \n   \nThe test app is about doing CRUD operations on some of the masjids from Sarajevo. 💜  \u003cbr/\u003e \u003cbr/\u003e\nFor setting up the backend project I was following this blog https://www.c-sharpcorner.com/article/graphql-introduction-and-product-application-using-net-core-7/   \nAnd for the react graph-ql I was following mostly official documentation: https://www.apollographql.com/docs/react/data/queries\n\n# GraphQL\nIs a query language for API.  \n**Queries:** to get the data. (R in CRUD)  \n**Mutations:** to mutate data (CUD in CRUD)    \n-*Over-fetching:* you get more data than you actually need.  \nEx: you have object of 30 properties. For the specific UI, you only need Id, and Name of that object. So instead of getting only that 2 properties, you get 30.  \n-*Under-fetching:* you get less data than you actually need. Opposite of over-fetching.  \nGraphQL gives clients the power to ask for exactly what they need so they can avoid over-fetching or under-fetching.\n\nOn this url (https://localhost:7277/graphql/), you can play with GraphQL:  \n\n\nhttps://github.com/Dacili/GraphQL/assets/37112852/83530685-196a-4c48-8d57-a7c89161253f\n\nDemo of app:  \n\n\nhttps://github.com/Dacili/GraphQL/assets/37112852/eb64b0a1-c1ef-4813-9db3-908d728d1e44\n\n\n\n\n# GraphQL vs REST\n- While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs in a single request (you can nest queries, or mutations in 1 request).   \n- With GraphQL we're avoiding over-fetching or under-fetching (it's very good for mobile), in REST we would have to create different APIs to cover all needs.  \n- REST is more established and enjoys widespread support. It’s easier to find more tools, integration, and infrastructure for a more specialized project.\n![image](https://github.com/Dacili/GraphQL/assets/37112852/89c1ccea-faba-4336-9e0e-0a45bac9dce6)\n\n\n#### All examples of queries and mutations  \nIds are generated every time, so make sure you're using existing Ids..\n```\nquery {\n  allMasjids{\n    id,\n  name,\n  city\n  }\n}\n\n\nquery {\n   masjidById(id:\"d6c9e423-4a6f-45aa-b312-ab4541c6c4d9\"){\n    id,\n  name,\n  city\n  }\n}\n\n\nwe can do nesting, multiple queries (or mutations) in 1 request:\nquery {\n  allMasjids{\n    id,\n  name,\n  city\n  },\n  masjidById(id:\"d6c9e423-4a6f-45aa-b312-ab4541c6c4d9\"){\n    id,\n  name,\n  city\n  }\n\n}\n\n\nmutation($masjidToAdd: MasjidInput!) {\n   createMasjid(masjid:$masjidToAdd){\n    id, name\n   }\n}\nvariable:\n{\n  \"masjidToAdd\":{\n    \"id\":\"5bed484d-bbe6-439d-bfd4-22ab877410aa\",\n    \"name\":\"Hotell Hills masjid\",\n    \"city\":\"Sarajevo\"\n}  \n}\n\n\nmutation($masjidToAdd: MasjidInput!) {\n   updateMasjid(masjid:$masjidToAdd){\n    id, name, city\n   }\n}\nvariable\n{\n  \"masjidToAdd\":{\n    \"id\":\"5bed484d-bbe6-439d-bfd4-22ab877410aa\",\n    \"name\":\"Hotell Hills masjid\",\n    \"city\":\"Sarajevo\"\n}  \n}\n\nmutation($id: UUID!) {\n   deleteMasjid \n    ( id:$id){\n      name\n    }\n}\nvariable\n{\n  \"id\":\"06cab730-6a16-4eca-9cb0-f9406cada013\"\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacili%2Fgraphql-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdacili%2Fgraphql-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacili%2Fgraphql-react/lists"}