import React from 'react'
import	{ UserList } from './UserList'
import { gql, useQuery } from '@apollo/client'

export default {
  title: 'Users',
  component: UserList
}

const USERS_QUERY = gql`
query {
  users {
    name
  }
}
`
function UsersList(props){
  const { loading, error, data} = useQuery(USERS_QUERY)
  if (loading) return <p>Loading...</p>
  if (error) return console.error('broken UsersList. Erorr: \n', error)
  console.log('user list', data)
  return <UserList teams={data.users} />
}
export const userList = () => <UsersList />