search

Hardeepex / juicybabencmz

0 stars 0 forks source link

sweep: Please Setup Custom Post Types (CPTs) in Faustjs Repo Named Models #7

Open Hardeepex opened 6 months ago

Hardeepex commented 6 months ago

This guide covers how to set up Custom Post Types in your Faust templates. This guide shows how to setup about movies but you have to work on models and i have done the wordpress part

Note: This guide assumes you have a working Faust app using Faust templates. If you don’t have a Faust site created yet, please follow the Getting Started guide first.

Before You Start It’s important that your CPT is registered with some specific fields and values:

public: Must be true. Otherwise the posts can’t be resolved in Faust. has_archive: Should be true. This is so that you can create an archive (i.e. /movies) in your Faust app. show_in_graphql: Must be true so the data can be queried from WPGraphQL. For example, here is the CPT that was registered for this tutorial:

function register_movies_cpt() { $args = [ 'label' => esc_html__( 'Movies', 'twentytwentyone' ), 'public' => true, // If the CPT is not public, it can not be properly resolved in Faust. 'publicly_queryable' => true, 'show_ui' => true, 'show_in_rest' => true, 'rest_base' => '', 'rest_controller_class' => 'WP_REST_Posts_Controller', 'rest_namespace' => 'wp/v2', 'has_archive' => true, // Important for creating an archive in Faust. 'show_in_menu' => true, 'show_in_nav_menus' => true, 'delete_with_user' => false, 'exclude_from_search' => false, 'capability_type' => 'post', 'map_meta_cap' => true, 'hierarchical' => false, 'can_export' => false, 'rewrite' => [ 'slug' => 'movies', 'with_front' => true ], 'query_var' => true, 'supports' => [ 'title', 'editor', 'thumbnail' ], 'show_in_graphql' => true, 'graphql_single_name' => 'Movie', 'graphql_plural_name' => 'Movies', ];

register_post_type( 'movies', $args );

}

add_action( 'init', 'register_movies_cpt' ); Code language: PHP (php) For this guide, we’ll assume you have a Custom Post Type with a slug of movies.

Verify Your CPT Was Setup Properly Before we start creating templates in Faust, let’s first verify your CPT is setup properly and accessible in WPGraphQL.

Let’s create a post title “The Dark Knight” in our movies CPT:

Creating a post in WordPress with the title The Dark Knight Then, let’s visit the page on WordPress to make sure it’s public:

A WordPress Page for The Dark Knight Great! It is publicly available. Now let’s make sure we can access the movie and the archive in WPGraphQL. You can use the following query to do so:

query GetMovieByUri($uri: String!) {
nodeByUri(uri: $uri) {
... on NodeWithTitle {
title
}
... on NodeWithContentEditor {
content
}
}
} Code language: HTML, XML (xml) And don’t forget the query variables:

{
"uri": "movies/the-dark-knight"
} Code language: HTML, XML (xml) A WPGraphQL query being executed for getting a movie by uri We can see we are getting the title and content back properly.

Finally, we need to check if the archive is accessible:

query ArchiveMovies($uri: String!) { nodeByUri(uri: $uri) { __typename ... on ContentType { label } } } Code language: PHP (php) And the query variables:

{ "uri": "/movies" } Code language: JSON / JSON with Comments (json) A WPGraphQL query being executed for getting a movie archive by uri We’ve just confirmed that our CPT is available in WPGraphQL. Now, let’s move to the Faust app!

Generate Possible Types Before we start creating templates, we need to generate possible types for Apollo. These possible types tell Apollo what is available in your schema, and how it caches data. Since we added a new CPT, the possible types have changed, so a regeneration is required.

You can do this by running the faust generatePossibleTypes script. In the getting started project, this is mapped to npm run generate:

A screenshot of VS Code running the Faust generatePossibleTypes script Create Faust Templates With possible types generated, we can now start creating Faust templates for our CPTs!

Before we begin, start the dev server in the Faust app:

npm run dev Single Movie Template Let’s get started by building our “single movie” template. If you navigate to http://localhost:3000/movies/the-dark-knight you will get a 404. But upon inspecting the server output, you will see the possible templates for the route:

A screenshot of the output from Faust describing the possible templates for the route You can see using any of the following templates will resolve for this route:

['single-movies-the-dark-knight', 'single-movies', 'singular', 'index']; Code language: CSS (css) Since we want this template to be just for any single movie, we’ll create a template called single-movies. In your wp-templates directory, create a file called single-movies.js with the following content:

import { gql } from '@apollo/client';

export default function SingleMovie(props) { const { title, content } = props.data.nodeByUri;

return ( <>

{title}

  <div dangerouslySetInnerHTML={{ __html: content }} />
</>

); }

SingleMovie.variables = ({ uri }) => { return { uri }; };

SingleMovie.query = gql query GetMovieByUri($uri: String!) { nodeByUri(uri: $uri) { ... on NodeWithTitle { title } ... on NodeWithContentEditor { content } } } ; Code language: JavaScript (javascript) Note: Notice we are using the same query from WPGraphQL. You can test your queries in WPGraphQL IDE and copy and paste them into Faust.

Now that we have created our template, we need to register it by adding it to the object in wp-templates/index.js:

// wp-templates/index.js

import category from './category'; import tag from './tag'; import frontPage from './front-page'; import page from './page'; import single from './single'; import SingleMovie from './single-movies';

export default { category, tag, 'front-page': frontPage, page, single, 'single-movies': SingleMovie, }; Code language: JavaScript (javascript) Our single movie template has now been registered! If you visit http://localhost:3000/movies/the-dark-knight again you can see the template properly resolves:

The finished Faust template for the single movie being resolved in the browser Archive Movie Template With our single movie template created, let’s create our template for the movie archive next.

If you navigate to http://localhost:3000/movies you will get a 404. Inspect the server output, and you will see the possible templates for the route:

A screenshot of the output from Faust describing the possible templates for the route You can see using any of the following templates will resolve for this route:

['archive-movies', 'archive', 'index']; Code language: CSS (css) Since we want this template to be just for our movie archive, we’ll create a template called archive-movies. In your wp-templates directory, create a file called archive-movies.js with the following content:

import { gql } from '@apollo/client'; import Link from 'next/link';

export default function ArchiveMovies(props) { const { label, contentNodes } = props.data.nodeByUri;

return ( <>

{label} Archive

  <ul>
    {contentNodes.nodes.map((node) => (
      <li>
        <Link href={node.uri}>{node.title}</Link>
      </li>
    ))}
  </ul>
</>

); }

ArchiveMovies.variables = ({ uri }) => { return { uri }; };

ArchiveMovies.query = gql query MovieArchive($uri: String!) { nodeByUri(uri: $uri) { ... on ContentType { label description contentNodes { nodes { databaseId uri ... on NodeWithTitle { title } } } } } } ; Code language: JavaScript (javascript) Don’t forget to register your new archive template in the wp-templates/index.js file:

// wp-templates/index.js

import category from './category'; import tag from './tag'; import frontPage from './front-page'; import page from './page'; import single from './single'; import SingleMovie from './single-movies'; import ArchiveMovies from './archive-movies';

export default { category, tag, 'front-page': frontPage, page, single, 'single-movies': SingleMovie, 'archive-movies': ArchiveMovies, }; Code language: JavaScript (javascript) Our archive movie template has now been registered! If you visit http://localhost:3000/movies again you can see the template properly resolves:

The finished Faust template for the movie archive being resolved in the browser You now have two new Faust templates resolving for your Movies custom post type!

Checklist - [X] Create `src/wp-templates/single-models.tsx` ✓ https://github.com/Hardeepex/juicybabencmz/commit/63c2da6bfb99b6a645c479758d0560c2bee63919 [Edit](https://github.com/Hardeepex/juicybabencmz/edit/sweep/please_setup_custom_post_types_cpts_in_f/src/wp-templates/single-models.tsx) - [X] Running GitHub Actions for `src/wp-templates/single-models.tsx` ✓ [Edit](https://github.com/Hardeepex/juicybabencmz/edit/sweep/please_setup_custom_post_types_cpts_in_f/src/wp-templates/single-models.tsx) - [X] Create `src/wp-templates/archive-models.tsx` ✓ https://github.com/Hardeepex/juicybabencmz/commit/2a8bc8aa2681c972e1e2bac1d2530c77c357e449 [Edit](https://github.com/Hardeepex/juicybabencmz/edit/sweep/please_setup_custom_post_types_cpts_in_f/src/wp-templates/archive-models.tsx) - [X] Running GitHub Actions for `src/wp-templates/archive-models.tsx` ✓ [Edit](https://github.com/Hardeepex/juicybabencmz/edit/sweep/please_setup_custom_post_types_cpts_in_f/src/wp-templates/archive-models.tsx) - [X] Modify `src/wp-templates/index.tsx` ✓ https://github.com/Hardeepex/juicybabencmz/commit/e28e445fbb1c9f8052567b7441b1d6b4ac91631c [Edit](https://github.com/Hardeepex/juicybabencmz/edit/sweep/please_setup_custom_post_types_cpts_in_f/src/wp-templates/index.tsx) - [X] Running GitHub Actions for `src/wp-templates/index.tsx` ✓ [Edit](https://github.com/Hardeepex/juicybabencmz/edit/sweep/please_setup_custom_post_types_cpts_in_f/src/wp-templates/index.tsx)
sweep-ai[bot] commented 6 months ago

🚀 Here's the PR! #10

See Sweep's progress at the progress dashboard!
💎 Sweep Pro: I'm using GPT-4. You have unlimited GPT-4 tickets. (tracking ID: 194a55f158)
Install Sweep Configs: Pull Request

Actions (click)

Sandbox Execution ✓

Here are the sandbox execution logs prior to making any changes:

Sandbox logs for ad3b1a1
Checking src/wp-templates/index.tsx for syntax errors... ✅ src/wp-templates/index.tsx has no syntax errors! 1/1 ✓ 
Checking src/wp-templates/index.tsx for syntax errors...
✅ src/wp-templates/index.tsx has no syntax errors!

Sandbox passed on the latest main, so sandbox checks will be enabled for this issue.

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I think are relevant in decreasing order of relevance (click to expand). If some file is missing from here, you can mention the path in the ticket description. https://github.com/Hardeepex/juicybabencmz/blob/ad3b1a1ecb87305e7ec0d7e4b4595b9dcc661355/src/wp-templates/archive.tsx#L17-L169 https://github.com/Hardeepex/juicybabencmz/blob/ad3b1a1ecb87305e7ec0d7e4b4595b9dcc661355/src/wp-templates/index.tsx#L1-L15
I also found the following external resources that might be helpful: **Summaries of links found in the content:** https://faustjs.org/tutorial/get-started-with-faust: This page provides a guide on how to set up Custom Post Types (CPTs) in Faust templates. It assumes that you already have a working Faust app using Faust templates. The guide explains the necessary fields and values that need to be set when registering a CPT, such as 'public', 'has_archive', and 'show_in_graphql'. It provides an example of registering a CPT for movies using PHP code. The guide then shows how to verify if the CPT is set up properly and accessible in WPGraphQL by creating a post and checking if it can be queried using WPGraphQL queries. Next, the guide explains how to generate possible types for Apollo to cache data and then proceeds to show how to create Faust templates for the CPT. It provides code examples for creating a single movie template and an archive movie template. The code includes GraphQL queries and variables for fetching data from WPGraphQL. Finally, the guide explains how to register the templates in the wp-templates/index.js file. It concludes by stating that you now have two new Faust templates resolving for your Movies custom post type. https://faustjs.org/reference/template-system: This page provides a guide on how to set up Custom Post Types (CPTs) in Faust templates. It assumes that you have a working Faust app using Faust templates. Before starting, it is important to register your CPT with specific fields and values such as 'public', 'has_archive', and 'show_in_graphql'. The page includes an example of registering a CPT for movies in PHP. To verify that your CPT is set up properly, you can create a post in WordPress and check if it is publicly available. You can also use WPGraphQL queries to check if the movie and archive are accessible. To generate possible types for Apollo, you need to run the faust generatePossibleTypes script. This is necessary because adding a new CPT changes the possible types. The page then explains how to create Faust templates for CPTs. It provides an example of creating a "single movie" template and an "archive movie" template. The templates include the component, query, and variables. The component is the rendering layer, and the query is used to fetch the template's data. The variables are GraphQL variables for the query. The page also explains how to register the templates in the wp-templates/index.js file. Overall, this guide provides step-by-step instructions and code snippets for setting up and creating templates for Custom Post Types in Faust.

Step 2: ⌨️ Coding

Ran GitHub Actions for 63c2da6bfb99b6a645c479758d0560c2bee63919:

Ran GitHub Actions for 2a8bc8aa2681c972e1e2bac1d2530c77c357e449:

--- 
+++ 
@@ -3,6 +3,8 @@
 import category from "./category";
 import tag from "./tag";
 import main from "./main";
+import SingleModel from './single-models';
+import ArchiveModels from './archive-models';
 import archive from "./archive";

 export default {
@@ -13,4 +15,6 @@
   tag,
   index: main,
   archive,
+  'single-models': SingleModel,
+  'archive-models': ArchiveModels,
 };

Ran GitHub Actions for e28e445fbb1c9f8052567b7441b1d6b4ac91631c:

Step 3: 🔁 Code Review

I have finished reviewing the code for completeness. I did not find errors for sweep/please_setup_custom_post_types_cpts_in_f.

🎉 Latest improvements to Sweep:

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request. Join Our Discord

Hardeepex commented 6 months ago

sweep: did you updated the queries and other component which are required to run this code

Hardeepex commented 6 months ago

sweep: please fix the bugs and complete the code