-
-
Notifications
You must be signed in to change notification settings - Fork 452
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
major(next): support Next 13 and React Server Components (#3214)
Co-authored-by: Phil Pluckthun <[email protected]>
- Loading branch information
1 parent
aeb6b44
commit 889ca4d
Showing
31 changed files
with
1,023 additions
and
1,617 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
'@urql/next': major | ||
--- | ||
|
||
Create `@urql/next` which is a package meant to support Next 13 and | ||
the React 18 features contained within. | ||
|
||
For server components we have `@urql/next/rsc` and for client components | ||
just `@urql/next`. |
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
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,16 @@ | ||
export const metadata = { | ||
title: 'Create Next App', | ||
description: 'Generated by create next app', | ||
}; | ||
|
||
export default function RootLayout({ | ||
children, | ||
}: { | ||
children: React.ReactNode; | ||
}) { | ||
return ( | ||
<html lang="en"> | ||
<body>{children}</body> | ||
</html> | ||
); | ||
} |
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,24 @@ | ||
'use client'; | ||
|
||
import { | ||
UrqlProvider, | ||
ssrExchange, | ||
cacheExchange, | ||
fetchExchange, | ||
createClient, | ||
} from '@urql/next'; | ||
|
||
const ssr = ssrExchange(); | ||
const client = createClient({ | ||
url: 'https://graphql-pokeapi.graphcdn.app/', | ||
exchanges: [cacheExchange, ssr, fetchExchange], | ||
suspense: true, | ||
}); | ||
|
||
export default function Layout({ children }: React.PropsWithChildren) { | ||
return ( | ||
<UrqlProvider client={client} ssr={ssr}> | ||
{children} | ||
</UrqlProvider> | ||
); | ||
} |
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,65 @@ | ||
'use client'; | ||
|
||
import Link from 'next/link'; | ||
import { Suspense } from 'react'; | ||
import { useQuery, gql } from '@urql/next'; | ||
|
||
export default function Page() { | ||
return ( | ||
<Suspense> | ||
<Pokemons /> | ||
</Suspense> | ||
); | ||
} | ||
|
||
const PokemonsQuery = gql` | ||
query { | ||
pokemons(limit: 10) { | ||
results { | ||
id | ||
name | ||
} | ||
} | ||
} | ||
`; | ||
|
||
function Pokemons() { | ||
const [result] = useQuery({ query: PokemonsQuery }); | ||
return ( | ||
<main> | ||
<h1>This is rendered as part of SSR</h1> | ||
<ul> | ||
{result.data | ||
? result.data.pokemons.results.map((x: any) => ( | ||
<li key={x.id}>{x.name}</li> | ||
)) | ||
: JSON.stringify(result.error)} | ||
</ul> | ||
<Suspense> | ||
<Pokemon name="bulbasaur" /> | ||
</Suspense> | ||
<Link href="/">RSC</Link> | ||
</main> | ||
); | ||
} | ||
|
||
const PokemonQuery = gql` | ||
query ($name: String!) { | ||
pokemon(name: $name) { | ||
id | ||
name | ||
} | ||
} | ||
`; | ||
|
||
function Pokemon(props: any) { | ||
const [result] = useQuery({ | ||
query: PokemonQuery, | ||
variables: { name: props.name }, | ||
}); | ||
return ( | ||
<div> | ||
<h1>{result.data && result.data.pokemon.name}</h1> | ||
</div> | ||
); | ||
} |
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,40 @@ | ||
import Link from 'next/link'; | ||
import { cacheExchange, createClient, fetchExchange, gql } from '@urql/core'; | ||
import { registerUrql } from '@urql/next/rsc'; | ||
|
||
const makeClient = () => { | ||
return createClient({ | ||
url: 'https://graphql-pokeapi.graphcdn.app/', | ||
exchanges: [cacheExchange, fetchExchange], | ||
}); | ||
}; | ||
|
||
const { getClient } = registerUrql(makeClient); | ||
|
||
const PokemonsQuery = gql` | ||
query { | ||
pokemons(limit: 10) { | ||
results { | ||
id | ||
name | ||
} | ||
} | ||
} | ||
`; | ||
|
||
export default async function Home() { | ||
const result = await getClient().query(PokemonsQuery, {}); | ||
return ( | ||
<main> | ||
<h1>This is rendered as part of an RSC</h1> | ||
<ul> | ||
{result.data | ||
? result.data.pokemons.results.map((x: any) => ( | ||
<li key={x.id}>{x.name}</li> | ||
)) | ||
: JSON.stringify(result.error)} | ||
</ul> | ||
<Link href="/non-rsc">Non RSC</Link> | ||
</main> | ||
); | ||
} |
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,5 @@ | ||
/// <reference types="next" /> | ||
/// <reference types="next/image-types/global" /> | ||
|
||
// NOTE: This file should not be edited | ||
// see https://nextjs.org/docs/basic-features/typescript for more information. |
Oops, something went wrong.