Enter GQL
So to fetch the data from our backend we'll be using GraphQL. So let's install the necessary libraries.
yarn add @apollo/client
yarn add @rocketgraphql/rocketgraph-js-sdk
yarn add @rocketgraphql/react-apollo
Now modify the Signup.js page to be able to register new users:
import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';
import { auth } from "../utils/config";
import {
Flex,
Box,
FormControl,
FormLabel,
Input,
Checkbox,
Stack,
Link,
Button,
Heading,
Text,
useColorModeValue,
} from '@chakra-ui/react';
export default function SimpleCard() {
const [ email, setEmail ] = useState()
const [ password, setPassword ] = useState()
const navigate = useNavigate();
const signup = async () => {
// login
try {
await auth.register({email, password});
navigate("/")
} catch (error) {
alert("error signing up");
console.error(error);
return;
}
}
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
<Stack align={'center'}>
<Heading fontSize={'4xl'}>Create your account</Heading>
<Text fontSize={'lg'} color={'gray.600'}>
to enjoy all of our cool <Link color={'blue.400'}>features</Link> ✌️
</Text>
</Stack>
<Box
rounded={'lg'}
bg={useColorModeValue('white', 'gray.700')}
boxShadow={'lg'}
p={8}>
<Stack spacing={4}>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input type="email" onChange={(e) => setEmail(e.target.value)}/>
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<Input type="password" onChange={(e) => setPassword(e.target.value)}/>
</FormControl>
<Stack spacing={10}>
<Stack
direction={{ base: 'column', sm: 'row' }}
align={'start'}
justify={'space-between'}>
<Checkbox>Remember me</Checkbox>
<Link color={'blue.400'}>Forgot password?</Link>
</Stack>
<Button
onClick={() => signup()}
bg={'blue.400'}
color={'white'}
_hover={{
bg: 'blue.500',
}}>
Sign up
</Button>
</Stack>
</Stack>
</Box>
</Stack>
</Flex>
);
}
Notice that we are using the Rocketgraph's auth.register() method. This will take care of handling the signup and setting the user cookies for us.
And similarly for the login:
import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';
import { auth } from "../utils/config";
import {
Flex,
Box,
FormControl,
FormLabel,
Input,
Checkbox,
Stack,
Link,
Button,
Heading,
Text,
useColorModeValue,
} from '@chakra-ui/react';
export default function SimpleCard() {
const [ email, setEmail ] = useState()
const [ password, setPassword ] = useState()
const navigate = useNavigate();
const signup = async () => {
// login
try {
await auth.signIn({email, password, provider: "local"});
navigate("/")
} catch (error) {
alert("error signing up");
console.error(error);
return;
}
}
return (
<Flex
minH={'100vh'}
align={'center'}
justify={'center'}
bg={useColorModeValue('gray.50', 'gray.800')}>
<Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
<Stack align={'center'}>
<Heading fontSize={'4xl'}>Login to your account</Heading>
<Text fontSize={'lg'} color={'gray.600'}>
to enjoy all of our cool <Link color={'blue.400'}>features</Link> ✌️
</Text>
</Stack>
<Box
rounded={'lg'}
bg={useColorModeValue('white', 'gray.700')}
boxShadow={'lg'}
p={8}>
<Stack spacing={4}>
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input type="email" onChange={(e) => setEmail(e.target.value)}/>
</FormControl>
<FormControl id="password">
<FormLabel>Password</FormLabel>
<Input type="password" onChange={(e) => setPassword(e.target.value)}/>
</FormControl>
<Stack spacing={10}>
<Stack
direction={{ base: 'column', sm: 'row' }}
align={'start'}
justify={'space-between'}>
<Checkbox>Remember me</Checkbox>
<Link color={'blue.400'}>Forgot password?</Link>
</Stack>
<Button
onClick={() => signup()}
bg={'blue.400'}
color={'white'}
_hover={{
bg: 'blue.500',
}}>
Sign up
</Button>
</Stack>
</Stack>
</Box>
</Stack>
</Flex>
);
}
Now test that you are able to retrieve the users list via the following code in App.js:
import logo from './logo.svg';
import Profiles from "./components/Profiles"
import './App.css';
function App() {
return (
<div className="App">
<Profiles/>
</div>
);
}
export default App;
And create a component named Profiles.js in /components:
import {
Heading,
Avatar,
Box,
Center,
Image,
Flex,
Text,
Stack,
Button,
useColorModeValue,
useRangeSlider,
} from '@chakra-ui/react';
import { gql, useQuery, useMutation, useSubscription } from "@apollo/client";
const GET_TODOS = gql`
subscription {
users {
id
email
}
}
`;
export default function SocialProfileWithImage() {
const { data, loading } = useSubscription(GET_TODOS);
const bgColor800 = useColorModeValue('white', 'gray.800');
const bgColor900 = useColorModeValue('#151f21', 'gray.900');
const users = data?.users;
return (
<Center py={6}>
{
users && users.map((user) => {
return (
<Box
maxW={'270px'}
w={'full'}
bg={bgColor800}
boxShadow={'2xl'}
rounded={'md'}
overflow={'hidden'}>
<Image
h={'120px'}
w={'full'}
src={
'https://images.unsplash.com/photo-1612865547334-09cb8cb455da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'
}
objectFit={'cover'}
/>
<Flex justify={'center'} mt={-12}>
<Avatar
size={'xl'}
src={
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ'
}
alt={'Author'}
css={{
border: '2px solid white',
}}
/>
</Flex>
<Box p={6}>
<Stack spacing={0} align={'center'} mb={5}>
<Heading fontSize={'2xl'} fontWeight={500} fontFamily={'body'}>
{user.email}
</Heading>
<Text color={'gray.500'}>Frontend Developer</Text>
</Stack>
<Button
w={'full'}
mt={8}
bg={bgColor900}
color={'white'}
rounded={'md'}
onClick={() => {window.location = `/messages?email=${user.email}`} }
_hover={{
transform: 'translateY(-2px)',
boxShadow: 'lg',
}}>
Message
</Button>
</Box>
</Box>
)
})
}
</Center>
);
}
Top comments (0)