The document discusses the integration of Remix and GraphQL, emphasizing type safety and developer experience. It outlines how to create a GraphQL API, connect data sources, generate SDKs, and implement Remix routes with GraphQL loaders and schemas. The document also highlights using mutations for database operations and offers a Q&A section for further engagement.

1. Remix & GraphQL:
A match made in
heaven with
type-safety DX

2. Jesus Manuel Olivas
CEO and Co-founder at Octahedroid
@jmolivas

3. We are a professional services and
consulting agency specialized in helping
enterprise customers implement
modern front-end technologies with
Headless CMS platforms.

4. Graphabase: Create
your GraphQL API

6. Connect all your data sources

7. Customize your API

8. DB Connections

10. GenQL:
Generate your
SDK

14. Remix:
Consume your
SDK

15. Create your
Index Page?
Create a Route
(app/routes/_index.tsx)
Call GenQL Client
From Remix loader.
Return a function
That render React components using
the fetched data from the loader.

16. Import Components

17. The Client

18. Fragments 1/2

19. Fragments 2/2

20. Loader 1/2

21. Loader
2/2

22. Index

24. 01 Create schemas using zod.
Mutations
02
03
Use remix-forms.
Execute mutations via GraphQL to
create, update and/or delete records
on the remote DB.

25. Import Components

26. Create schemas

27. Loader

28. Form

29. Loader 1/2

30. GraphQL
Mutation

31. Got swag? 😎
Get some free stickers.
Questions & Answers
@jmolivas
@OctahedroidHQ

32. Remix and GraphQL:
A match made in heaven
with type-safety DX
Jesus Manuel Olivas
@jmolivas
CEO and Co-founder at Octahedroid