vike-react-apollo
v0.1.1
Published
<!-- WARNING: keep links absolute in this file so they work on NPM too -->
Downloads
190
Readme
vike-react-apollo
Enables your React components to fetch data using Apollo GraphQL.
[!NOTE] You also get progressive rendering, fallback upon loading and/or error, and caching.
Installation
Basic usagewithFallback()
How it works
See also
Installation
npm install @apollo/client @apollo/client-react-streaming graphql vike-react-apollo
- Extend
+config.js
:// pages/+config.js import vikeReact from 'vike-react/config' import vikeReactApollo from 'vike-react-apollo/config' export default { // ... extends: [vikeReact, vikeReactApollo] }
- Create
+ApolloClient.js
:// +ApolloClient.js import { ApolloClient, InMemoryCache } from '@apollo/client-react-streaming' export default (pageContext: PageContext) => new ApolloClient({ uri: 'https://countries.trevorblades.com', cache: new InMemoryCache() })
[!NOTE] The
vike-react-apollo
extension requiresvike-react
.
Basic usage
// Countries.jsx
import { useSuspenseQuery, gql } from '@apollo/client/index.js'
const Countries = () => {
const { data } = useSuspenseQuery(gql`
{
countries {
code
name
}
}
`)
return (
<ul>
{data.countries.map((country) => (
<li key={country.code}>{country.name}</li>
))}
</ul>
)
}
[!NOTE] Even though
useSuspenseQuery()
is imported from@apollo/client
, you still need to installvike-react-apollo
for it to work.
withFallback()
withFallback(Component) // Use default loading fallback (see +Loading)
withFallback(Component, Loading) // Define loading fallback
withFallback(Component, Loading, Error) // Define loading and error fallback
withFallback(Component, undefined, Error) // Define error fallback
// Country.jsx
import { useSuspenseQuery, gql } from '@apollo/client/index.js'
import { withFallback } from 'vike-react-apollo'
const Country = withFallback(
({ code }) => {
const { data } = useSuspenseQuery(
gql`
query Country($code: String!) {
country(code: $code) {
name
}
}
`,
{
variables: {
code
}
}
)
return (
<div>
Name: <b>{data.country.name}</b>
</div>
)
},
({ code }) => <div>Loading country {code}</div>,
// The props `retry` and `error` are provided by vike-react-apollo
// Other props, such as `code`, are provied by the parent component
({ code, retry, error }) => (
<div>
Failed to load country {code}
<button onClick={() => retry()}>Retry</button>
</div>
)
)
+Loading
If you skip the Loading
parameter, then a default loading component (provided by vike-react
) is used. You can create a custom default loading component:
// pages/+Loading.jsx
export default { component: LoadingComponent }
function LoadingComponent() {
// Applies on a component-level
return <div>Loading...</div>
}
Instead of adding a loading fallback to the component, you can set a loading fallback to the page and layouts:
// pages/+Loading.jsx
export default { layout: LoadingLayout }
function LoadingLayout() {
// Applies to the page and all layouts
return <div>Loading...</div>
}
[!NOTE] The
+Loading.layout
setting is optional and only relevant when usinguseSuspenseQuery()
withoutwithFallback()
orwithFallback(Component, false)
.withFallback(Component, false) // Don't set any loading fallback withFallback(Component, undefined) // Use default loading fallback
Manual <Suspense>
boundary
Technically speaking:
withFallback()
wraps the component inside a<Suspense>
boundary.+Loading.layout
adds a<Suspense>
boundary to the<Page>
component as well as to all<Layout>
components.
You can also manually add a <Suspense>
boundary at any arbitrary position:
import { Suspense } from 'react'
function SomePageSection() {
return (
<Suspense fallback={<div>Loading...</div>}>
<SomeDataFetchingComponent />
<SomeOtherDataFetchingComponent />
</Suspense>
)
}
How it works
Upon SSR, the component is rendered to HTML and its data loaded on the server-side. On the client side, the component is merely hydrated.
Upon page navigation (and rendering the first page if SSR is disabled), the component is rendered and its data loaded on the client-side.
[!NOTE] With
vike-react-apollo
you fetch data on a component-level instead of using Vike'sdata()
hook which fetches data on a page-level.
[!NOTE] Behind the scenes
vike-react-apollo
integrates Apollo GraphQL into the HTML stream.