diff --git a/next.config.mjs b/next.config.mjs index 79805438..995a7805 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -25,6 +25,11 @@ const nextConfig = { }, redirects() { return [ + { + source: "/guide/how-to-migrate-from-legacy-faust", + destination: "/docs/how-to/migrate-from-legacy-faust/", + permanent: true, + }, { source: "/tutorial/get-started-with-wp-graphql-content-blocks", destination: "/docs/how-to/rendering-blocks/", diff --git a/src/pages/docs/how-to/migrate-from-legacy-faust/images/possible-templates-migration.png b/src/pages/docs/how-to/migrate-from-legacy-faust/images/possible-templates-migration.png new file mode 100644 index 00000000..e68b558f Binary files /dev/null and b/src/pages/docs/how-to/migrate-from-legacy-faust/images/possible-templates-migration.png differ diff --git a/src/pages/docs/how-to/migrate-from-legacy-faust/index.mdx b/src/pages/docs/how-to/migrate-from-legacy-faust/index.mdx new file mode 100644 index 00000000..5b724860 --- /dev/null +++ b/src/pages/docs/how-to/migrate-from-legacy-faust/index.mdx @@ -0,0 +1,283 @@ +export const metadata = { + title: "Migrate from Legacy Faust", + description: + "Upgrading your headless WordPress setup from GQty-based Faust to the current version. Learn how to reuse presentational components, write GraphQL queries, and adopt the WP Template system for a smooth transition", +}; + +Migration from the previous versions of Faust that use GQty is a manual process. However, there are some conventional techniques and best practices for React Development that will definitely help you with this process. + +To migrate from the legacy version to the current version, follow the guide that most closely represents your model. Each guide recommends an integration path along with example code. + +## Reusing Presentational Components + +The Components folder typically contains components that embody a presentational meaning. + +By presentational, we mean they do not depend on GQty or any hooks or side-effects. They just take props and render the data. Here is an example of a presentational component taken from this blueprint: + +```js title="PostInfo.js" +export default function PostInfo({ className, author, date }) { + if (!date && !author) { + return null; + } + + return ( +
+ {date && ( + + )} + {date && author && <> } + {author && By {author}} +
+ ); +} +``` + +There is no reference to GQty or Apollo and this component can be safely re-used across different applications. + +On the other hand the following component is more difficult to migrate as it depends on the GQty client: + +**Before** + +```js title="NavMenu.js" +export default function NavigationMenu({ className, menuLocation, children }) { + const { useQuery } = client; + const { nodes: menuItems } = useQuery().menuItems({ + where: { + location: menuLocation, + }, + }); +``` + +You will have to either replace the `useQuery()` from GQty with the `useQuery()` of Apollo or perform the query on a higher level and pass on the menu items as props: + +**After** + +```js title="NavMenu.js" +export default function NavigationMenu({ menuItems, className, children }) { + if (!menuItems) { + return null; + } + + return ( +