Remix Blog Post

action.jsx

import {
    useActionData,
    Form,
    redirect,
    json
} from 'remix'

export async function action({ request }) {
    const formData = await request.formData()
    const errors = {}
    
    // Do data validation and add to the errors object if there are any errors
    
    if (Object.keys(errors).length) {
        return json(errors, { status: 422 })
    }
    
    // No errors: send email, store in DB, do whatever you need to do with the form data
    
    return redirect('/contact/thanks')
}

export default function ContactIndex() {
    const errors = useActionData()
    
    return (
        <Form method="post">
        </Form>
    )
}

loader.jsx

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>
            ))}
        </>
    )
}