-
Notifications
You must be signed in to change notification settings - Fork 109
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Implement SSR. #44
Merged
Merged
Changes from 85 commits
Commits
Show all changes
87 commits
Select commit
Hold shift + click to select a range
1ef1105
refactor: Rewrite in TypeScript.
avocadowastaken 64b67bb
chore: Deduplicate modules.
avocadowastaken 6428400
fix(useQuery): Use `ApolloCurrentResult` for state.
avocadowastaken 138ef75
chore: Setup .
avocadowastaken a36e293
fix(useQuery): `QueryHookState.data` can be `undefined`.
avocadowastaken 52eb34b
chore: Setup `eslint-plugin-typescript`.
avocadowastaken c68a01c
fix(useQuery): Pick `data` prop in `QueryHookState`.
avocadowastaken d6a112a
style(useQuery-test): Remove unused variables.
avocadowastaken b80f378
feat(useQuery): Implement `skip`.
avocadowastaken a362343
chore: Run `build:typings` in `build` script.
avocadowastaken 56dbfe3
Merge branch 'ts' into ts+skip
avocadowastaken 9802ab5
fix(package): Add missed `npm run`.
avocadowastaken 0e03f25
Merge branch 'ts' into ts+skip
avocadowastaken 0c2b7b6
fix(useQuery): Cherry pick props from `currentResult`.
avocadowastaken 5bf2a46
Merge branch 'ts' into ts+skip
avocadowastaken 9fb5c03
fix(useQuery): Cherry pick props from `currentResult`.
avocadowastaken 94e520c
fix(useQuery): Define `observableQuery` for skipped hooks.
avocadowastaken 29be675
feat(useQuery): Use observable query as main source of truth, useMemo.
avocadowastaken 7a5a9dc
test(useQuery): Add `jest-react-profiler` tests.
avocadowastaken df35507
fix(useQuery): Remove `console.log`s.
avocadowastaken 9b61fbb
[WIP]
avocadowastaken 3d5302e
[WIP]
avocadowastaken ffc3681
[WIP]
avocadowastaken ad4b425
feat: Implement SSR.
avocadowastaken d908182
fix: Expose `getMarkupFromTree`.
avocadowastaken 90a96ec
[WIP]
avocadowastaken 01a6883
[WIP]
avocadowastaken a28d8bb
[WIP]
avocadowastaken d2cd233
refactor(react-apollo-hooks): Move main modules to separate files.
avocadowastaken 0211a4e
refactor(tests): Use `toMatchInlineSnapshot` and `jest-react-profiler`.
avocadowastaken 899eed5
refactor: Rename non JSX files to `ts`.
avocadowastaken 3a925da
Merge branch 'refactor-files' into refactor-tests
avocadowastaken 731a3a1
feat(useQuery): Use Apollo client state as main source of truth.
avocadowastaken 769fcd2
[WIP]
avocadowastaken c771dc6
[WIP]
avocadowastaken 6cda268
Merge branch 'ts' into refactor-files
avocadowastaken b4c7b48
[WIP]
avocadowastaken e776802
[WIP]
avocadowastaken 65990cc
[WIP]
avocadowastaken 96f35b9
Merge branch 'ts' into refactor-files
avocadowastaken 9d1a8d4
Merge branch 'master' into refactor-tests
avocadowastaken 31a2205
Merge branch 'master' into refactor-files
avocadowastaken 008ff5d
[WIP]
avocadowastaken e5aecbb
[WIP]
avocadowastaken 2898291
[WIP]
avocadowastaken f54c543
Merge branch 'refactor-files' into refactor-tests
avocadowastaken 43e1948
[WIP]
avocadowastaken 28e9d59
[WIP]
avocadowastaken 4dace68
Merge branch 'refactor-files' into refactor-tests
avocadowastaken 8e501b7
Merge branch 'master' into refactor-tests
avocadowastaken 8249233
[WIP]
avocadowastaken ab3f5f4
[WIP]
avocadowastaken f4de4c7
[WIP]
avocadowastaken 08ebc15
[WIP]
avocadowastaken 78701e0
Merge branch 'master' into use-query-state
avocadowastaken ab21ec9
[WIP]
avocadowastaken e09a262
[WIP]
avocadowastaken a9cdd54
[WIP]
avocadowastaken f7ead46
[WIP]
avocadowastaken d2c6cc4
[WIP]
avocadowastaken 151102a
[WIP]
avocadowastaken c538f90
Merge branch 'use-query-state' into memo
avocadowastaken f517f36
[WIP]
avocadowastaken a037df1
[WIP]
avocadowastaken 451b9ff
[WIP]
avocadowastaken 0b0584d
[WIP]
avocadowastaken b316b54
[WIP]
avocadowastaken 4a8d8c8
Merge branch 'use-query-state' into memo
avocadowastaken aa395b6
[WIP]
avocadowastaken 4478236
[WIP]
avocadowastaken ad13202
Merge branch 'use-query-state' into memo
avocadowastaken d4a4a6d
Merge branch 'master' into memo
avocadowastaken 00f5af1
Merge branch 'memo' into ssr
avocadowastaken 692d7c2
[WIP]
avocadowastaken 9ab89cd
[WIP]
avocadowastaken b9a03d5
[WIP]
avocadowastaken 9bbb52b
[WIP]
avocadowastaken d096636
Merge branch 'master' into ssr
avocadowastaken adedaa6
[WIP]
avocadowastaken 75b4f9d
[WIP]
avocadowastaken 17df664
[WIP]
avocadowastaken ad45a6c
[WIP]
avocadowastaken 5c97b53
[WIP]
avocadowastaken eb314d0
[WIP]
avocadowastaken 2425cfa
[WIP]
avocadowastaken 149595c
[WIP]
avocadowastaken 466d74c
[WIP]
avocadowastaken File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React, { Suspense, SuspenseProps, useContext } from 'react'; | ||
import { SSRContext } from './internal/SSRContext'; | ||
|
||
export function unstable_SuspenseSSR({ children, fallback }: SuspenseProps) { | ||
const ssrManager = useContext(SSRContext); | ||
|
||
return ssrManager ? ( | ||
<>{children}</> | ||
) : ( | ||
<Suspense fallback={fallback}>{children}</Suspense> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,131 @@ | ||
import ApolloClient from 'apollo-client'; | ||
import { ApolloLink } from 'apollo-link'; | ||
import { MockedResponse } from 'apollo-link-mock'; | ||
import gql from 'graphql-tag'; | ||
import * as React from 'react'; | ||
import { renderToString } from 'react-dom/server'; | ||
import { render } from 'react-testing-library'; | ||
|
||
import { ApolloProvider } from '../ApolloContext'; | ||
import { unstable_SuspenseSSR as SuspenseSSR } from '../SuspenseSSR'; | ||
import createClient from '../__testutils__/createClient'; | ||
import flushEffectsAndWait from '../__testutils__/flushEffectsAndWait'; | ||
import { getMarkupFromTree } from '../getMarkupFromTree'; | ||
import { QueryHookOptions, useQuery } from '../useQuery'; | ||
|
||
const USER_QUERY = gql` | ||
{ | ||
currentUser { | ||
firstName | ||
} | ||
} | ||
`; | ||
|
||
interface UserQueryResult { | ||
currentUser: { firstName: string }; | ||
} | ||
|
||
const MOCKS: MockedResponse[] = [ | ||
{ | ||
request: { query: USER_QUERY }, | ||
result: { data: { currentUser: { firstName: 'James' } } }, | ||
}, | ||
]; | ||
|
||
function createMockClient(link?: ApolloLink) { | ||
return createClient({ link, mocks: MOCKS, addTypename: false }); | ||
} | ||
|
||
function UserDetails(props: QueryHookOptions<{}>) { | ||
const { data, loading } = useQuery<UserQueryResult>(USER_QUERY, props); | ||
|
||
return ( | ||
<> | ||
{loading | ||
? 'Loading' | ||
: !data | ||
? 'No Data' | ||
: !data.currentUser | ||
? 'No Current User' | ||
: data.currentUser.firstName} | ||
</> | ||
); | ||
} | ||
|
||
interface UserWrapperProps extends QueryHookOptions<{}> { | ||
readonly client: ApolloClient<object>; | ||
} | ||
|
||
function UserDetailsWrapper({ client, ...props }: UserWrapperProps) { | ||
return ( | ||
<ApolloProvider client={client}> | ||
<SuspenseSSR fallback={<>Loading with suspense</>}> | ||
<UserDetails {...props} /> | ||
</SuspenseSSR> | ||
</ApolloProvider> | ||
); | ||
} | ||
|
||
it('not throws in react-dom with suspense', async () => { | ||
const client = createMockClient(); | ||
|
||
const { container } = render(<UserDetailsWrapper client={client} suspend />); | ||
|
||
expect(container).toMatchInlineSnapshot(` | ||
<div> | ||
Loading with suspense | ||
</div> | ||
`); | ||
|
||
await flushEffectsAndWait(); | ||
|
||
expect(container).toMatchInlineSnapshot(` | ||
<div> | ||
James | ||
</div> | ||
`); | ||
}); | ||
|
||
it('not throws in react-dom without suspense', async () => { | ||
const client = createMockClient(); | ||
|
||
const { container } = render( | ||
<UserDetailsWrapper client={client} suspend={false} /> | ||
); | ||
|
||
expect(container).toMatchInlineSnapshot(` | ||
<div> | ||
Loading | ||
</div> | ||
`); | ||
|
||
await flushEffectsAndWait(); | ||
|
||
expect(container).toMatchInlineSnapshot(` | ||
<div> | ||
James | ||
</div> | ||
`); | ||
}); | ||
|
||
it('not throws in react-dom/server with suspense', async () => { | ||
avocadowastaken marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const client = createMockClient(); | ||
|
||
await expect( | ||
getMarkupFromTree({ | ||
renderFunction: renderToString, | ||
tree: <UserDetailsWrapper client={client} suspend />, | ||
}) | ||
).resolves.toMatchInlineSnapshot(`"James"`); | ||
}); | ||
|
||
it('not throws in react-dom/server without suspense', async () => { | ||
const client = createMockClient(); | ||
|
||
await expect( | ||
getMarkupFromTree({ | ||
renderFunction: renderToString, | ||
tree: <UserDetailsWrapper client={client} suspend={false} />, | ||
}) | ||
).resolves.toMatchInlineSnapshot(`"James"`); | ||
}); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just curious. Was there a specific reason to wrap
children
intofragment
?