Create client for App Router #1527

blakewilson · 2023-08-09T14:16:24Z

Tasks

I have signed a Contributor License Agreement (CLA) with WP Engine.
If a code change, I have written testing instructions that the whole team & outside contributors can understand.
I have written and included a comprehensive changeset to properly document the changes I've made.

Description

This PR adds the getClient function to the @faustwp/experimental-app-router package to be used to fetch data from WordPress in RSCs (React Server Components). Additionally, this PR adds a new example project called app-router for testing changes and features to the experimental app router work.

Related Issue(s):

Testing

Check out the PR
Run npm install at the monorepo root
Build the packages npm run build from the monorepo root
Create a .env.local file from the .env.local.sample in examples/next/app-router
Run npm run generate -w @faustwp/app-router-example to generate your site's possible types
Run npm run dev -w @faustwp/app-router-example to start the example project on http://localhost:3000
View the homepage and notice the title/description and menus are being queried. Go to /[postSlug] to see post data being queried.

Screenshots

Documentation Changes

Dependant PRs

changeset-bot · 2023-08-09T14:16:30Z

🦋 Changeset detected

Latest commit: 3a96ea8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@faustwp/experimental-app-router	Patch
@faustwp/app-router-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2023-08-09T14:19:39Z

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
`global`	`242.59 KB` (🟢 -2.46 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Four Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/`	`290 B`	242.87 KB	69.39% (+/- <0.01%)
`/[...wordpressNode]`	`302 B`	242.88 KB	69.40% (+/- <0.01%)
`/example`	`842 B`	243.41 KB	69.55% (+/- <0.01%)
`/preview`	`281 B`	242.86 KB	69.39% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions · 2023-08-09T14:21:11Z

Coverage report for `packages/faustwp-core`

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	83.64%	854/1021
🟡	Branches	68.53%	516/753
🟢	Functions	84.51%	120/142
🟢	Lines	83.3%	823/988

Test suite run success

122 tests passing in 22 suites.

Report generated by 🧪jest coverage report action from 3a96ea8

github-actions · 2023-08-09T14:21:38Z

Coverage report for `packages/faustwp-cli`

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	84.71%	72/85
🔴	Branches	57.14%	8/14
🟡	Functions	63.64%	14/22
🟢	Lines	83.58%	56/67

Test suite run success

15 tests passing in 5 suites.

Report generated by 🧪jest coverage report action from 3a96ea8

blakewilson · 2023-08-10T04:53:31Z

The tests that were created are failing because they are not being ran within a React Server context (this is coming from an Apollo Error). I've opened an issue on the Apollo Experimental App Router repo to get more info on how to best navigate this within their package:

apollographql/apollo-client-nextjs#81

theodesp · 2023-08-10T13:58:35Z

The tests that were created are failing because they are not being ran within a React Server context (this is coming from an Apollo Error). I've opened an issue on the Apollo Experimental App Router repo to get more info on how to best navigate this within their package:

apollographql/apollo-client-nextjs#81

There is an assertion error in this package.

https://github.com/apollographql/apollo-client-nextjs/blob/3367d9a0e968b8a7533c15fcb4c0d65924f6bc7c/package/src/rsc/registerApolloClient.tsx#L4

Maybe you can mock this to return true. Not ideal though since it implies knowledge of internal logic.

Alternatively you can remove the context export from React using Jest before running the test case.

blakewilson · 2023-08-10T15:59:33Z

The tests that were created are failing because they are not being ran within a React Server context (this is coming from an Apollo Error). I've opened an issue on the Apollo Experimental App Router repo to get more info on how to best navigate this within their package:
apollographql/apollo-client-nextjs#81

There is an assertion error in this package.

https://github.com/apollographql/apollo-client-nextjs/blob/3367d9a0e968b8a7533c15fcb4c0d65924f6bc7c/package/src/rsc/registerApolloClient.tsx#L4

Maybe you can mock this to return true. Not ideal though since it implies knowledge of internal logic.

Alternatively you can remove the context export from React using Jest before running the test case.

@theodesp It's also not exported, which makes it pretty tough to mock. Thoughts on leaving this test commented out until we hear more from apollographql/apollo-client-nextjs#81?

mindctrl · 2023-08-11T18:45:47Z

Thoughts on leaving this test commented out until we hear more from apollographql/apollo-client-nextjs#81

@blakewilson Sounds good to me. That helps you keep moving. Let's ticket the test issue though, so we don't accidentally forget, and circle back soon.

There's a merge conflict here now.

Create client for app router

9df55bc

blakewilson added 4 commits August 9, 2023 11:09

Create tests

102c5cf

Add example project

a6090e9

Example cosmetics

f49e176

Import Faust utils from dist

097ccd4

Clean up tests

3fe60be

blakewilson marked this pull request as ready for review August 10, 2023 14:23

blakewilson requested a review from a team as a code owner August 10, 2023 14:23

Add changeset

bce5af8

blakewilson added 7 commits August 11, 2023 14:23

Use Faust config and set possible types

c0c9871

Comment out client test until upstream error is resolved

7d062a1

Merge branch 'canary' into app-router-client

4bde1fd

Fix merge conflict

79dc6a6

rename invalid test file to not be picked up by jest

a6dc982

update jest.config.js

a0dc1ed

Install jest-environment-jsdom

bda5240

theodesp approved these changes Aug 14, 2023

View reviewed changes

Revert Toolbar.test.tsx changes

3a96ea8

mindctrl approved these changes Aug 14, 2023

View reviewed changes

blakewilson merged commit 3267c87 into canary Aug 14, 2023

blakewilson deleted the app-router-client branch August 14, 2023 16:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create client for App Router #1527

Create client for App Router #1527

blakewilson commented Aug 9, 2023 •

edited

Loading

changeset-bot bot commented Aug 9, 2023 •

edited

Loading

github-actions bot commented Aug 9, 2023 •

edited

Loading

github-actions bot commented Aug 9, 2023 •

edited

Loading

github-actions bot commented Aug 9, 2023 •

edited

Loading

blakewilson commented Aug 10, 2023

theodesp commented Aug 10, 2023

blakewilson commented Aug 10, 2023

mindctrl commented Aug 11, 2023

Create client for App Router #1527

Create client for App Router #1527

Conversation

blakewilson commented Aug 9, 2023 • edited Loading

Tasks

Description

Related Issue(s):

Testing

Screenshots

Documentation Changes

Dependant PRs

changeset-bot bot commented Aug 9, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 9, 2023 • edited Loading

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

🎉 Global Bundle Size Decreased

Four Pages Changed Size

github-actions bot commented Aug 9, 2023 • edited Loading

Coverage report for packages/faustwp-core

Test suite run success

github-actions bot commented Aug 9, 2023 • edited Loading

Coverage report for packages/faustwp-cli

Test suite run success

blakewilson commented Aug 10, 2023

theodesp commented Aug 10, 2023

blakewilson commented Aug 10, 2023

mindctrl commented Aug 11, 2023

blakewilson commented Aug 9, 2023 •

edited

Loading

changeset-bot bot commented Aug 9, 2023 •

edited

Loading

github-actions bot commented Aug 9, 2023 •

edited

Loading

github-actions bot commented Aug 9, 2023 •

edited

Loading

Coverage report for `packages/faustwp-core`

github-actions bot commented Aug 9, 2023 •

edited

Loading

Coverage report for `packages/faustwp-cli`