[TS + Docs] Include potential gql input variables in ListCell's Loading and Success component typing & improve TS docs

[Philzen]

Although list cells in the simpler examples don't have input variables, they will very well have them in more advanced apps (i.e. only selecting the items that belong to a certain user or given other constraints), so it good to have these input vars available for autocompletion out of the box.

• Adds to fix(deps): update dependency @apollo/client to v3.6.2 #5343 (updating all docs to reflect QUERY annotation with TypedDocumentNode)
• adds to in [TS] Include query parameters in typed Cell component props #11737, as i realized these now have to be passed in order for the types to still work.
• Updated documentation for new generated …QueryVariables generic on Failure and Success components
• docs: fixed some tsx highlighting blocks
• docs: fixed import order to reflect Eslint rules since RW 2

[Philzen]

Checklist:

• Update fixtures
• https://docs.redwoodjs.com/docs/tutorial/chapter2/cells
• https://docs.redwoodjs.com/docs/tutorial/chapter2/routing-params
• https://docs.redwoodjs.com/docs/tutorial/chapter5/first-story
• https://docs.redwoodjs.com/docs/tutorial/chapter5/first-test
• https://docs.redwoodjs.com/docs/tutorial/chapter6/multiple-comments
• https://docs.redwoodjs.com/docs/tutorial/chapter6/comment-form
• https://docs.redwoodjs.com/docs/tutorial/chapter7/rbac
• https://docs.redwoodjs.com/docs/how-to/pagination/

---

For a future PR – add typescript tabs to

• https://docs.redwoodjs.com/docs/canary/graphql/mocking-graphql-requests
• https://docs.redwoodjs.com/docs/tutorial/chapter7/api-side-currentuser/

[Philzen]

Phew this was quite a lot of work, but it's done. @Tobbe kindly review at your convenience.

BTW – i'm not sure what prettier is complaining there, i pretty much ran all changed code through my local linter before copying it into the docs.

[Tobbe]

@Tobbe kindly review at your convenience.

Will do!

BTW, did you see my DM on the forums?

[Philzen]

BTW, did you see my DM on the forums?

Just saw it two days ago and still digesting it … will answer soon, promised.

[Philzen]

@Tobbe the smoke tests are failing b/c

redwood/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.test.tsx

Lines 25 to 41 in 95afaf9

	it('renders Failure successfully', async () => {
	expect(() => {
	render(<Failure id={42} error={new Error('Oh no')} />)
	}).not.toThrow()
	})
	// When you're ready to test the actual output of your component render
	// you could test that, for example, certain text is present:
	//
	// 1. import { screen } from '@redwoodjs/testing/web'
	// 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
	it('renders Success successfully', async () => {
	expect(() => {
	render(<Success id={42} blogPosts={standard().blogPosts} />)
	}).not.toThrow()
	})

these generated tests include an id prop … but the cell doesn't require one 🧐

These IDs appeared in 495f625#diff-61b70e171dde41fe8e245f38f44c78d8ec3354923c8b8b9a9713d1b1f7db74f8 – so i guess idName evaluates to true in the template when it shouldn't.

[Tobbe]

@Tobbe the smoke tests are failing b/c

redwood/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.test.tsx

Lines 25 to 41 in 95afaf9

	it('renders Failure successfully', async () => {
	expect(() => {
	render(<Failure id={42} error={new Error('Oh no')} />)
	}).not.toThrow()
	})
	// When you're ready to test the actual output of your component render
	// you could test that, for example, certain text is present:
	//
	// 1. import { screen } from '@redwoodjs/testing/web'
	// 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
	it('renders Success successfully', async () => {
	expect(() => {
	render(<Success id={42} blogPosts={standard().blogPosts} />)
	}).not.toThrow()
	})

these generated tests include an id prop … but the cell doesn't require one 🧐

These IDs appeared in 495f625#diff-61b70e171dde41fe8e245f38f44c78d8ec3354923c8b8b9a9713d1b1f7db74f8 – so i guess idName evaluates to true in the template when it shouldn't.

Fixed in #11779
Thanks for figuring out what the cause was 🕵️‍♂️