Drupal, GraphQL, Views, View Modes and Gatsby for a US Gov site

1. Jesus Manuel Olivas / octahedroid
Drupal, GraphQL, Views, View Modes
and Gatsby for a US Gov site

2. Jesus Manuel Olivas
jmolivas.com
@jmolivas
———————————————
octahedroid.com
Co-Founder

3. We are a professional services and
consulting agency specializing in modern
front-end tools, cloud native architectures,
automation and CMS integrations.

4. Agenda
> View Modes
> GatsbyJS
> Views ( Client side and SSR build time )
> Migration, YAML Content and Console Commands
> Challenges

5. Challenges
> Keep the same editorial experience
> Build a secure, fast and easy to maintain site
> Reduce the overhead of the infrastructure team
> Provide a modern experience to visitors

6. The 80 / 20 rule
> Migration covers 80%
> YAML Content covers the 80% of the remaining
20%
> Console commands covers the 80% of the
remaining 20%
> Manual entry for the remaining content tasks

7. Migration
> Migrate plugins to scrap block content placed
via context module and panels
> Migrate content from single fields to Paragraphs
> Extract images from WYSIWYG to Paragraphs
> Avoid duplicate media entities when creating
Paragraphs and Custom Block Types

8. YAML Content
> Use YAML files to generate content ( i.e. pages
exposed via views on D7 )
> Create then update nodes to force path alias
> Reuse migrate plugins to scrap block content
placed via context

11. Console Commands snippet
> Convert PNG and GIF files as JPEG and update
references on body fields.
> Update path alias for certain Nodes
> Set Taxonomies for certain Nodes
> Update nodes for edge cases

12. Views
> Add view to expose data client side
> Connect the view with Solr engine
> Enable GraphQL Views module
> Call GraphQL endpoint via client side from
Gatsby application

15. Views: src/components/search.js

17. Views
> Add view using a reference via Paragraphs
> Allow to pass a taxonomy as contextual filter
> Allow to pass the number of nodes to return
> Allow to select the React component to render
( i.e. list, teaser )

18. Views:

19. Views: Node Edit

24. View Mode
> Allow to provide different presentations of field
values using Field Formatters
> Use Field Formatter provided by core or custom
mode for this example we will use Smart trim
> Customize Field Formatter options to display
data as we want so use to the user

25. View Mode

26. View Mode: GraphQL query

27. View Mode: Twig Template

28. View Mode: Output

29. Gatsby: plugins
> gatsby
> gatsby-source-graphql
> gatsby-link
> gatsby-image
> gatsby-plugin-sharp
> gatsby-transformer-sharp
> gatsby-source-filesystem
> gatsby-plugin-theme-ui

30. Gatsby: gatsby-config.js

32. Gatsby: Query nodes

33. Gatsby: Create pages

37. DEMO

38. Thank you.
Any Questions?
@jmolivas | @octahedroidHQ