{"id":18347075,"url":"https://github.com/merveyyildiz/drupal-json-react","last_synced_at":"2026-05-04T23:37:56.176Z","repository":{"id":39470132,"uuid":"196594382","full_name":"merveyyildiz/drupal-json-react","owner":"merveyyildiz","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T04:29:11.000Z","size":3833,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-09T22:55:11.270Z","etag":null,"topics":["drupal-8","json-api","reactjs"],"latest_commit_sha":null,"homepage":null,"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/merveyyildiz.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":"2019-07-12T14:35:03.000Z","updated_at":"2021-02-02T19:26:38.000Z","dependencies_parsed_at":"2023-02-01T20:32:19.203Z","dependency_job_id":null,"html_url":"https://github.com/merveyyildiz/drupal-json-react","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/merveyyildiz%2Fdrupal-json-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merveyyildiz%2Fdrupal-json-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merveyyildiz%2Fdrupal-json-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merveyyildiz%2Fdrupal-json-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merveyyildiz","download_url":"https://codeload.github.com/merveyyildiz/drupal-json-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125629,"owners_count":21051766,"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":["drupal-8","json-api","reactjs"],"created_at":"2024-11-05T21:13:04.614Z","updated_at":"2026-05-04T23:37:56.123Z","avatar_url":"https://github.com/merveyyildiz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## **MODÜL EKLEME**\n\n1.Öncelikle sitenize JSON:API modülünü aktif etmeniz gerekmektedir. Yüklediğiniz modülün ayarları Configuration altında Web Services bölümüne gelecektir. Gelen JSON:API ‘nin üstüne tıklayınız.\nKarşınıza 2 seçenek gelmektedir. Eğer sadece veri çekecekseniz ilk seçeneği , veri çekip veri yollayacak, güncelleyecek veya silecekseniz ikinci seçeneği seçiniz.\n\n2.HTTP BASİC Authentication modülünü aktif ediniz.\n\n3.Daha sonra drupal/sites klasörü altında bulunan default.services.yml dosyasını kopyalayarak adını services.yml olarak değiştirip içerisinde bulunan cors.config ayarlarını aşağıdaki gibi yapılandırınız.\n\n```cors.config:\n enabled: false\n # Specify allowed headers, like 'x-allowed-header'.\n allowedHeaders: []\n # Specify allowed request methods, specify ['*'] to allow all possible\nones.\n allowedMethods: []\n # Configure requests allowed from specific origins.\n allowedOrigins: ['*']\n # Sets the Access-Control-Expose-Headers header.\n exposedHeaders: false\n # Sets the Access-Control-Max-Age header.\n maxAge: false\n # Sets the Access-Control-Allow-Credentials header.\n supportsCredentials: false\n cors.config:\n enabled: true\n allowedHeaders: ['*']\n allowedMethods: ['GET', 'POST', 'PATCH', 'DELETE']\n allowedOrigins: ['*']\n exposedHeaders: false\n maxAge: false\n supportsCredentials: false\n```\n\n**NOT**: React da axios kütüphanesini kullanırsanız yaptığınız isteklerde hata alma olasılığınız daha düşük olacaktır.\n\n**GET**\\\nBu metot ile veri çekebilirsiniz.\nSitenizde default olarak article content type'ı gelmektedir.\nurl/jsonapi/node/article path'inde datalarınız gözükecektir.Bu url'li axios.get() içine yapıştırınız. .then() içinde bir response dönecektir.Bu dönen response da istediğiniz contentleri çekebilirsiniz.Aşağıdaki örnek kodda gelen datalar dizi halinde geldiği için dizinin kaçıncı indisini almak istediğimizi belirttik.\n\n```\n      axios\n        .get(\n          'http://drupart.dev.com/user/jsonapi/node/article'\n        )\n        .then(response =\u003e {\n          const title = response.data.data[1].attributes.title;\n          const id= response.data.data[1].id;\n          const data = {\n            title: title,\n            id:id\n          };\n          this.setState({ stateadi: data});\n        });\n    }\n```\n\n**POST**\\\nBu metot ile JSON:API'nize veri gönderebilirsiniz.Bu metotu çalıştırabilmeniz için JSON-API ayarlarınızda **Accep all JSON:API create,read,update,and delete operations.** seçili olması gerekmektedir.\\\nVeri göndereceğimiz için ilk önce axios.create oluşturmanız gerekmektedir.Baseurl'e kendi url'inizin kullanıcı isminize kadar olan kısmını ekleyiniz.Ayrıca Headers kısmında aşağıdaki kodun ekli olması gerekmektedir.\n\n```\nAccept: application/vnd.api+json\nContent-Type: application/vnd.api+json\nAuthorization:Basic YXBpOmFwaQ==\n```\n\n.post() içine /jsonapi/node/article ekleyin.Eklediğiniz url'i tırnak içine yazın ve tırnaktan sonra virgül koyarak göndermek istediğiniz datayı yazınız.Göndereceğiniz datanın formatı aşağıdaki gibi olmalıdır.\n\n```\n{\n  \"data\": {\n    \"type\": \"node--article\",\n    \"attributes\": {\n      \"title\": \"My custom title\",\n      \"body\": {\n        \"value\": \"Custom value\",\n        \"format\": \"plain_text\"\n      }\n    }\n  }\n}\n```\n\nEğer relationships'de göndermek istiyorsanız üstteki kodun davamına aşağıdaki kodu ekleyiniz.\n\n```\n \"relationships\": {\n      \"uid\": {\n        \"data\": {\n          \"type\": \"user--user\",\n          \"id\": \"{{UUID of user 1}}\"\n        }\n      }\n    }\n  }\n```\n\nAşağıdaki örnek kodu inceleyebilirsiniz.\n\n```\n const instance = axios.create({\n  baseURL: \"http://drupal.dev.com/user\",\n  timeout: 1000,\n  headers: {\n   Authorization: `Basic ${base64.encode(\"admin:a\")}`,\n   Accept: \"application/vnd.api+json\",\n   \"Content-Type\": \"application/vnd.api+json\",\n  },\n});\n\ninstance\n  .post(\"/jsonapi/node/article\", {\n    data: {\n      type: \"node--article\",\n      attributes: {\n        title: \"title\",\n        body: {\n          value: \"body\",\n          format: \"full_html\",\n        },\n      },\n    },\n  })\n  .then((response) =\u003e {\n    console.log(\"response\", response);\n  })\n  .catch((error) =\u003e {\n    console.log(\"error\", error);\n  });\n```\n\n**PATCH**\\\nBu metot ile datalarınızı güncelleyebilirsiniz. Post metodunda yaptığınız gibi ilk önce axios.create oluşturunuz.Baseurl'e kendi url'inizin kullanıcı isminize kadar olan kısmını ekleyiniz.Ayrıca Headers kısmında aşağıdaki kodun ekli olması gerekmektedir.\n\n```\nAccept: application/vnd.api+json\nContent-Type: application/vnd.api+json\nAuthorization:Basic YXBpOmFwaQ==\n```\n\nVeri güncelleyeceğimiz için güncellenecek olan datanın id'sine ihtiyacımız var.Bu id'yi .patch() içine url'i yazdıktan sonra başına \\$ işareti koyup {} içine yazınız ve virgül koyarak post metodunda yaptığımız gibi güncellenecek dataya yeni data göndeririz.Gönderilecek data aşağıdaki format gibi olmalıdır.\n\n```\n\n{\n  \"data\": {\n    \"type\": \"node--article\",\n    \"id\": \"{{article_uuid}}\",\n    \"attributes\": {\n      \"title\": \"My updated title\"\n    }\n  }\n}\n```\n\nEğer relationships eklemek istiyorsanız devamına aşağıdaki gövdeyi ekleyiniz.\n\n```\n  \"relationships\": {\n      \"uid\": {\n        \"data\": {\n          \"type\": \"user--user\",\n          \"id\": \"{{user_uuid}}\"\n        }\n      }\n    }\n```\n\nAşağıdaki örnek kodu inceleyebilirsiniz.\n\n```\n const title = this.state.updateTitle;\n   const id= this.props.id;\n    const instance = axios.create({\n     baseURL:\"http://drupart.dev.com/user\",\n     timeout:1000,\n     headers:{\n        Authorization: `Basic ${base64.encode(\"admin:a\")}`,\n        Accept: \"application/vnd.api+json\",\n       \"Content-Type\": \"application/vnd.api+json\",\n     },\n   });\n   instance\n   .patch(`/jsonapi/node/article/${id}`,\n {\n    data: {\n        type: \"node--article\",\n        id: id,\n        attributes: {\n            title: title,\n        }\n    }\n}\n)\n.then((response) =\u003e {\n    console.log(\"response\", response);\n  })\n  .catch((error) =\u003e {\n    console.log(\"error\", error);\n  });\n```\n\n**DELETE**\\\nBu metot ile data silinir. Diğer metotlarda olduğu gibi öncelikle axios.create() oluşturunuz.Baseurl'e kendi url'inizin kullanıcı isminize kadar olan kısmını ekleyiniz.Ayrıca Headers kısmında aşağıdaki kodun ekli olması gerekmektedir.\n\n```\nContent-Type: application/vnd.api+json\nAuthorization:Basic YXBpOmFwaQ==\n```\n\nDiğer motolardan farklı olarak bu metotda Accep eklemiyoruz.\\\nDatayı silmek için id'sine ihtiyacımız var. .delete() içine url yazdıktan sonra başına \\$ koyup {} içine datanın id'sini yazınız. .then() ile bir response dönecektir eğer dönen response görmek isityorsanız console yazdırabilirsiniz.\\\nAşağıya incelemeniz için örnek kod bırakılmıştır.\n\n```\n const instance = axios.create({\n  baseURL: \"http://drupal-dev.com/user\",\n  timeout: 1000,\n  headers: {\n    Authorization: `Basic ${base64.encode(\"admin:a\")}`,\n    \"Content-Type\": \"application/vnd.api+json\",\n  },\n});\ninstance\n  .delete(`/jsonapi/node/aticle/${id}`)\n  .then((response) =\u003e {\n    console.log(\"response\", response);\n  })\n  .catch((error) =\u003e {\n    console.log(\"error\", error);\n  });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerveyyildiz%2Fdrupal-json-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerveyyildiz%2Fdrupal-json-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerveyyildiz%2Fdrupal-json-react/lists"}