Load More Button or Infinite Scroll
Avoid Number-based pagination; poor UX
prev/next on single page
cursor-based pagination
UNDERSTAND DIF BETWEEN OFFSET_BASED AND CURSOR_BASED
Offset-based: counts records, skip ten then get the next ten.
WPgraphQL uses cursor-based: Betterf or larger data sets. pageInfo{} then Pass in a cursor hasNextpage and endCursor that represents last data record.
Details:
Load More Button
-some JS!
-Apollo Cient has some magic going on here to append from cache and resave in cache.
Infinite Scroll
-more js!
-using NextJS
-using package for infinite scroll
Prev/next on single page
-getStaticPaths to build dynamic routes using [slug].js
-Modified GraphQL schema to show PrevPost NextPost, (this is not avalibale out of the box)
-In the “hwp-rockers.php” file PaginationFields class and register_hooks method
-Issue with how to define Next-post logic, (is it based on created date, revised date, within category?). Easy enought o implement on your onw but this is why WPGQL hasn’t implemented out of the box yet?
Register CPT
Store additional Post Metadata
hwp-rockers plugin : based on Wp plugin boilerplate in his GitHub repo
ON WPGQL docs page
interface hookable implents Hookabel, CustomPostType
get_hookable_instances()
self::KEY (class constant)
labels
trait PostTypelbale
protected function
need use statement available to us
void keyword
create interface for CPT to enforce strict naming convention
method for register()
GraphiQL
mutation updateProject, deleteProject, getProject, getProjects. WPGraphQL gives you CRUD operation sout of the box when you register and add to the schema
STORING ADDTL DATA
Add a mutation to the plugin
createproject.php file
class CreateProject implements Hookable
register_hooks
add_action
register_input_fields
Set up functionailty by building validate method and is_create_project_mutation
validate_project_number method
private versus public functions
READ project and projects
“hwp-rockers/src/WPGraphQL/Type/ObjectType?project.php” file
UPDATE
We can update a field WP knows about at this point. Seems like there is a ton of overlap.
trait UpsertProject {}
update and inster equals upsert
DELETE
nodes, edges
Plugin named HWP Rockers (by Kellen Mace), single file
Why nodes then edges, seems more rebose.
GraphQL Voyager: Instrospection Query.
edge data, exists only if two nodes are connected to each other and this data lives between them. (Example is block time stamp used to show error if two users editing at the same time)
Rest – Primary API for WP Core WP and Gutenberg. Not a strongly-typed schema. No detail about fields. Tooling is rougher with no tool like GraphiQL. Test for 100 posts take 10.42 seconds. With Rest AOI there is no way to only what you need, (Can do query args but still). Does not support nested relationships. No Batch Queries. Built-in browser caching is apoint for REST API. File uploads great in REST. Native to WP so point to Rest.
WPGraphQL – Found Rest API to be inefficient to use single data source to multiple websites. Exact spec on graphQL. If specified as a object you need to specify all fields so this makes it very dev friendly. GraphiQL can be helpful to test routes, and see shape of requests. Test for 100 posts take 5.3 seconds. With GraphQL you get only what you need. Support nested relationships. Can query for multiple root resources. Data loader pattern and (rest experiences what is called n +1 problem). Supports Batch Queries, (Which apollo client supports). Can’t use browser’s built-in caching so need Apollo client, (or react query) to do something like this. WPGraphQl cannot handle file-uploads easily as multi-part form data, (often resort to rest for this, or hack to encode and decode).
Score Ended 8 – 3 for GraphQL
Link to the gist: https://gist.github.com/kellenmace/73c6fb405c5462fe981eb09bf632c91f
not exactly one-to-one but see written docs on wpgraphql.com
used runthroughhistory.com app to debug
int he chrom dev tools network tab in the bottom right can click on headers tab and preview tab to see error mesages
in WPGQL settings there is a setting to turn on debugging.
To test queries as non-admin user in Buitl in GrpahiQL in dashbaord log in as tst ueser with same permissions or can use stand alone instance of graphiql that you can download, (open source and free).
Chrome extension Xdebug help by Wrep needed for Xdebug
runthroughhistory.com
slow site? gtmetrix was not great (C) due to total page size at 7.4MB, (I think for video or animation?!). 2.8S load with Largest ContentFul Paint at 2.5s.
It is a PWA you can install on your phone and looks native although built with web technologies.
Uses RunSignup to sign up for app.
Events run through history, run through timeline each mile is a year. 12 months. Leaderboard.
Infinite scroll
Toast messages, sound effects
Add run with date (date-picker-calendar) and miles. No edit but delete and re-add.
Home, runs, timeline, leaderboard.
Timeline is grayed-out badge, a little gamification.
Leaderboard knows gender and age group. Can sort by all male, all female, my group.
CPT for Awards. Custom field for Miles required. is it a medal or a badge.
Plugins: Core plugin, WP graph QL, WPGQL for ACF, WPGQL JWT Auth, WPGQL Tax Query.
Closer look at headless base placeholder theme (on GitHub). It has the required style.css and index.php file, functions.php, README.md, screenshot.png. There is like 24 total lines of code in both php files. Redirect in functions.php file.
Closer look at “Headless WordPress plugin” Here is some meat and potatoes. Alos on GH, WP Plugin Boilerplate. 70 minutes in to video. Revisit with time. Good stuff like exposing CPT to WPGraphQL. Custom email settings. So. Much. PHP.
CPT for Runs: Individual user runs, 21k+ runs! ACF fields for miles and date. Is each user of the app an author? Dude was born on 4/22/1985?!
Users: Custom user fields for total miles, DOB, City, State, Age Group (set automatically), Gender.
Front-end and back-end repos. Headless WP Theme. Plugin Boilerplate.
WPGraphQL for ACF is only for you to wuery that data, not update it. Need a function like in “CreateRun.php” file to mutate.
simple search posts via graphQL Posts Finder App
store search query results in state
only imported ApolloClient and inMemoryCache from @apollo/client. Has the client in a “services/apollo.js” file
used a non-wp-plugin wpgraphiql ide to know whats available in your schema, build queries easily. free and open-sourced.
used debounce from Lodash for perf issue, see with XHR tab to see 5 request for each user keystroke typing “hello.” memoizes te debounce function levearging useMemo hook.
At the very end talks about typing in a query for a second time apollo’s inMemoryCache has made it lightning fast by storing in memory. A good reason for apollo client.
The five benefits covered in the video:
“https://headlesswp.rocks/decision-tool/”