1import React from 'react';
2import { gql, useQuery } from 'urql';
3
4const PROFILE_QUERY = gql`
5 query Profile {
6 me {
7 id
8 username
9 createdAt
10 }
11 }
12`;
13
14const Profile = () => {
15 const [result] = useQuery({ query: PROFILE_QUERY });
16
17 const { data, fetching, error } = result;
18
19 return (
20 <div>
21 {fetching && <p>Loading...</p>}
22
23 {error && <p>Oh no... {error.message}</p>}
24
25 {data?.me && (
26 <>
27 <p>profile data</p>
28 <p>id: {data.me.id}</p>
29 <p>username: {data.me.username}</p>
30 </>
31 )}
32 </div>
33 );
34};
35
36export default Profile;