import { GraphQLClient } from 'graphql-request'
import { gql } from 'graphql-request'
import { useLoaderData, json } from 'remix'

const endpoint = 'https://your-endpoint-here/'
const options = {
    headers: {
        authorization: 'Bearer YOUR_AUTH_TOKEN_HERE',
    }
}

const EntriesQuery = gql`
    {
        YOUR GRAPHQL QUERY HERE
    }
`

export const loader = async () => {
    const { entries } = new GraphQLClient(endpoint, options).request(EntriesQuery)

    return json({
        entries
    })
}

export default function Index() {
    const data = useLoaderData()

    return (
        <>
            {data.entries.map((entry) => (
                <div key={entry.id}>
                    {entry.title}
                </div>
            ))}
        </>
    )
}