{"id":22744162,"url":"https://github.com/mehradi-github/ref-blog-client","last_synced_at":"2026-05-03T10:38:14.339Z","repository":{"id":144808830,"uuid":"538330433","full_name":"mehradi-github/ref-blog-client","owner":"mehradi-github","description":"The blog-client is built by React (typescript) and Graphql","archived":false,"fork":false,"pushed_at":"2022-09-21T07:20:07.000Z","size":976,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T01:31:59.698Z","etag":null,"topics":["graphql","react","redux","typescript"],"latest_commit_sha":null,"homepage":"","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/mehradi-github.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-19T04:16:26.000Z","updated_at":"2023-02-09T07:09:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"49fd98b2-d25e-4d8f-af91-173719030ca0","html_url":"https://github.com/mehradi-github/ref-blog-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mehradi-github/ref-blog-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehradi-github%2Fref-blog-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehradi-github%2Fref-blog-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehradi-github%2Fref-blog-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehradi-github%2Fref-blog-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mehradi-github","download_url":"https://codeload.github.com/mehradi-github/ref-blog-client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mehradi-github%2Fref-blog-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32566444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["graphql","react","redux","typescript"],"created_at":"2024-12-11T01:40:31.932Z","updated_at":"2026-05-03T10:38:14.334Z","avatar_url":"https://github.com/mehradi-github.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Connecting the client to GraphQL with Apollo client\n\nThe blog-client is built by React (typescript) and [Graphql](https://graphql.org/code/#javascript-client).(This project depends on the [blog-server](https://github.com/mehradi-github/blog-server))\n\n## Installing Requirements\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [TS template](https://redux-toolkit.js.org/introduction/getting-started).\n\n```sh\n# Redux + TypeScript template\nnpx create-react-app blog-client --template redux-typescript\n\nnpm i -D eslint\nnpm create @eslint/config\nnpm i react-router-dom\nnpm i -D prettier eslint-config-prettier @types/react-router-dom\n```\n\nLearn more: [Install ESLint, Prettier, ESLint Plugin for Testing Library, ESLint Plugin for Jest DOM](https://github.com/mehradi-github/jest-rtl/)\n\nInstalling react-bootstrap Official Site: [https://react-bootstrap.github.io/getting-started/introduction](https://react-bootstrap.github.io/getting-started/introduction)\n\n```sh\nnpm i react-bootstrap bootstrap\nnpm i -D @types/react-bootstrap @types/bootstrap\n```\n\nsrc/index.tsx\n\n```javascript\nimport 'bootstrap/dist/css/bootstrap.min.css';\n```\n\n## Installing Apollo Client\n\n[Apollo Client](https://www.apollographql.com/docs/react/get-started) is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.\n\n```sh\nnpm i @apollo/client graphql\n```\n\nexample Signin:\n\n```javascript\nconst SINGIN = gql`\n  mutation Signin($credentials: CredentialsInput!) {\n    signin(credentials: $credentials) {\n      token\n      userErrors {\n        message\n      }\n    }\n  }\n`;\nconst [signin, { data, error, loading }] = useMutation(SINGIN);\n\nuseEffect(() =\u003e {\n  if (data \u0026\u0026 data.signin.token) {\n    localStorage.setItem('token', data.signin.token);\n  }\n}, [data]);\n\nconst submitForm = (event: React.FormEvent\u003cHTMLFormElement\u003e) =\u003e {\n  event.preventDefault();\n  signin({\n    variables: {\n      credentials: {\n        email,\n        password,\n      },\n    },\n  });\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehradi-github%2Fref-blog-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmehradi-github%2Fref-blog-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehradi-github%2Fref-blog-client/lists"}