https://github.com/mehradi-github/ref-blog-client
The blog-client is built by React (typescript) and Graphql
https://github.com/mehradi-github/ref-blog-client
graphql react redux typescript
Last synced: about 2 months ago
JSON representation
The blog-client is built by React (typescript) and Graphql
- Host: GitHub
- URL: https://github.com/mehradi-github/ref-blog-client
- Owner: mehradi-github
- Created: 2022-09-19T04:16:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-21T07:20:07.000Z (over 3 years ago)
- Last Synced: 2025-10-26T01:31:59.698Z (8 months ago)
- Topics: graphql, react, redux, typescript
- Language: TypeScript
- Homepage:
- Size: 953 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Connecting the client to GraphQL with Apollo client
The 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))
## Installing Requirements
This 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).
```sh
# Redux + TypeScript template
npx create-react-app blog-client --template redux-typescript
npm i -D eslint
npm create @eslint/config
npm i react-router-dom
npm i -D prettier eslint-config-prettier @types/react-router-dom
```
Learn more: [Install ESLint, Prettier, ESLint Plugin for Testing Library, ESLint Plugin for Jest DOM](https://github.com/mehradi-github/jest-rtl/)
Installing react-bootstrap Official Site: [https://react-bootstrap.github.io/getting-started/introduction](https://react-bootstrap.github.io/getting-started/introduction)
```sh
npm i react-bootstrap bootstrap
npm i -D @types/react-bootstrap @types/bootstrap
```
src/index.tsx
```javascript
import 'bootstrap/dist/css/bootstrap.min.css';
```
## Installing Apollo Client
[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.
```sh
npm i @apollo/client graphql
```
example Signin:
```javascript
const SINGIN = gql`
mutation Signin($credentials: CredentialsInput!) {
signin(credentials: $credentials) {
token
userErrors {
message
}
}
}
`;
const [signin, { data, error, loading }] = useMutation(SINGIN);
useEffect(() => {
if (data && data.signin.token) {
localStorage.setItem('token', data.signin.token);
}
}, [data]);
const submitForm = (event: React.FormEvent) => {
event.preventDefault();
signin({
variables: {
credentials: {
email,
password,
},
},
});
};
```