diff --git a/package-lock.json b/package-lock.json index ee8e9b6..e2a640f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1868,22 +1868,6 @@ "normalize-path": "^2.1.1" } }, - "apollo-boost": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.4.4.tgz", - "integrity": "sha512-ASngBvazmp9xNxXfJ2InAzfDwz65o4lswlEPrWoN35scXmCz8Nz4k3CboUXbrcN/G0IExkRf/W7o9Rg0cjEBqg==", - "requires": { - "apollo-cache": "^1.3.2", - "apollo-cache-inmemory": "^1.6.3", - "apollo-client": "^2.6.4", - "apollo-link": "^1.0.6", - "apollo-link-error": "^1.0.3", - "apollo-link-http": "^1.3.1", - "graphql-tag": "^2.4.2", - "ts-invariant": "^0.4.0", - "tslib": "^1.9.3" - } - }, "apollo-cache": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.2.tgz", diff --git a/package.json b/package.json index 5641314..461eb2f 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "dependencies": { "@apollo/react-components": "^3.1.1", "@apollo/react-hooks": "^3.1.0", - "apollo-boost": "^0.4.4", "apollo-cache-inmemory": "^1.6.3", "apollo-client": "^2.6.4", "apollo-link": "^1.2.13", diff --git a/src/Components/Singin.jsx b/src/Components/Singin.jsx index 9e7ade3..1808778 100644 --- a/src/Components/Singin.jsx +++ b/src/Components/Singin.jsx @@ -1,19 +1,32 @@ import React, { useState, useContext } from 'react'; import { Redirect, Link } from 'react-router-dom'; +import { useApolloClient } from '@apollo/react-hooks'; import { Button, Form, Container } from 'react-bootstrap'; import UserContext from '../Context/UserContext'; +import queries from '../query'; const Signin = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); - const [isLoading] = useState(false); - const { user } = useContext(UserContext); + const [isLoading, setIsLoading] = useState(false); + const { user, setUser } = useContext(UserContext); + const apolloClient = useApolloClient(); - // TODO: TASK 2. handleSingin const handleSingin = (event) => { event.preventDefault(); - console.log('handleSingin'); + if (email && password && !isLoading) { + setIsLoading(true); + apolloClient.query({ + query: queries.user.SIGNIN_QUERY, + variables: { email, password }, + }).then(({ data: { signin } }) => { + setUser(signin); + }).catch(() => { + alert('Wrong email/password'); + setIsLoading(false); + }); + } }; if (user) return ; diff --git a/src/apollo.js b/src/apollo.js index fded694..580620f 100644 --- a/src/apollo.js +++ b/src/apollo.js @@ -1,8 +1,35 @@ -import ApolloClient from 'apollo-boost'; +import { ApolloClient } from 'apollo-client'; +import { InMemoryCache } from 'apollo-cache-inmemory'; +import { HttpLink } from 'apollo-link-http'; +import { onError } from 'apollo-link-error'; +import { ApolloLink } from 'apollo-link'; -// TODO: TASK 1. migrate from apollo-boost +const globalLoader = new ApolloLink((operation, forward) => { + // Use Mobx or Redux (or other) for a global state manager + console.log('increment loading count'); + return forward(operation).map((response) => { + console.log('decrement loading count'); + return response; + }); +}); export default new ApolloClient({ - uri: 'http://localhost:8000/graphql', - credentials: 'same-origin', + link: ApolloLink.from([ + onError(({ graphQLErrors, networkError }) => { + if (graphQLErrors) { + graphQLErrors.forEach(({ message, locations, path }) => ( + console.log(`[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`) + )); + } + if (networkError) { + console.log(`[Network error]: ${networkError}`); + } + }), + globalLoader, + new HttpLink({ + uri: 'http://localhost:8000/graphql', + credentials: 'same-origin', + }), + ]), + cache: new InMemoryCache(), }); diff --git a/src/query/fragments.js b/src/query/fragments.js index 4d29d12..b1a93d9 100644 --- a/src/query/fragments.js +++ b/src/query/fragments.js @@ -1,6 +1,13 @@ import gql from 'graphql-tag'; -// TODO: TASK 2. EXTRA User Fragment +const user = gql` + fragment User on User { + id + name + username + email + } +`; const comment = gql` fragment Comment on Comment { @@ -8,12 +15,10 @@ const comment = gql` content timestamp author { - id - name - username - email + ...User } } + ${user} `; const post = gql` @@ -24,10 +29,7 @@ const post = gql` content timestamp author { - id - name - username - email + ...User } comments { pageInfo { @@ -42,10 +44,12 @@ const post = gql` } } } + ${user} ${comment} `; export default { + user, post, comment, }; diff --git a/src/query/user.js b/src/query/user.js index 7a9bcd0..11e2321 100644 --- a/src/query/user.js +++ b/src/query/user.js @@ -1,5 +1,5 @@ import gql from 'graphql-tag'; -// TODO: TASK 2. EXTRA User Fragment for every query/mutation +import fragments from './fragments'; const GET_USERS_QUERY = gql` query getUsers( @@ -21,18 +21,28 @@ const GET_USERS_QUERY = gql` } edges { node { - id - name - username - email + ...User } } } } + ${fragments.user} `; -// TODO: TASK 2. SIGNIN_QUERY -const SIGNIN_QUERY = ''; +const SIGNIN_QUERY = gql` + query signin( + $email: String! + $password: String! + ) { + signin ( + email: $email + password: $password + ) { + ...User + } + } + ${fragments.user} +`; const CREATE_USER_MUTATION = gql` mutation createUser( @@ -48,13 +58,11 @@ const CREATE_USER_MUTATION = gql` email: $email password: $password }) { - id - name - username - email + ...User } } } + ${fragments.user} `; export default {