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

About app

Application is created using React 18 for the frontend part,
and .Net Core .NET 7 for the backend.
Rsuite UI library is used for components.
Apollo client is used in React for Graph QL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
Hot chocolate - open-source GraphQL server for the Microsoft .NET Platform.

URLs:

Url for the frontend is: https://localhost:44419/
for the backend https://localhost:7277/
for the Graph QL https://localhost:7277/graphql/

The test app is about doing CRUD operations on some of the masjids from Sarajevo. 💜

For 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/
And for the react graph-ql I was following mostly official documentation: https://www.apollographql.com/docs/react/data/queries

GraphQL

Is a query language for API.
Queries: to get the data. (R in CRUD)
Mutations: to mutate data (CUD in CRUD)
-Over-fetching: you get more data than you actually need.
Ex: 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.
-Under-fetching: you get less data than you actually need. Opposite of over-fetching.
GraphQL gives clients the power to ask for exactly what they need so they can avoid over-fetching or under-fetching.

On this url (https://localhost:7277/graphql/), you can play with GraphQL:

2023-06-08_14h43_10.mp4

Demo of app:

2023-06-08_14h53_12.mp4

GraphQL vs REST

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).
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.
REST is more established and enjoys widespread support. It’s easier to find more tools, integration, and infrastructure for a more specialized project.

All examples of queries and mutations

Ids are generated every time, so make sure you're using existing Ids..

query {
  allMasjids{
    id,
  name,
  city
  }
}


query {
   masjidById(id:"d6c9e423-4a6f-45aa-b312-ab4541c6c4d9"){
    id,
  name,
  city
  }
}


we can do nesting, multiple queries (or mutations) in 1 request:
query {
  allMasjids{
    id,
  name,
  city
  },
  masjidById(id:"d6c9e423-4a6f-45aa-b312-ab4541c6c4d9"){
    id,
  name,
  city
  }

}


mutation($masjidToAdd: MasjidInput!) {
   createMasjid(masjid:$masjidToAdd){
    id, name
   }
}
variable:
{
  "masjidToAdd":{
    "id":"5bed484d-bbe6-439d-bfd4-22ab877410aa",
    "name":"Hotell Hills masjid",
    "city":"Sarajevo"
}  
}


mutation($masjidToAdd: MasjidInput!) {
   updateMasjid(masjid:$masjidToAdd){
    id, name, city
   }
}
variable
{
  "masjidToAdd":{
    "id":"5bed484d-bbe6-439d-bfd4-22ab877410aa",
    "name":"Hotell Hills masjid",
    "city":"Sarajevo"
}  
}

mutation($id: UUID!) {
   deleteMasjid 
    ( id:$id){
      name
    }
}
variable
{
  "id":"06cab730-6a16-4eca-9cb0-f9406cada013"
}