Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Warning: Asynchronous triggered a user-blocking update that suspended.
import React, {
Suspense,
useState,
// @ts-ignore - useDeferredValue does not exist yet in types
useDeferredValue,
useCallback,
ChangeEvent,
} from 'react'
import TextField from '@material-ui/core/TextField'
import LinearProgress from '@material-ui/core/LinearProgress'
import { graphql } from 'babel-plugin-relay/macro'
import { useLazyLoadQuery } from 'react-relay/hooks'
import {
FlowBlockFinderQuery,
FlowBlockFinderQueryResponse,
} from '../__generated__/FlowBlockFinderQuery.graphql'
import ErrorBoundaryWithRetry from '../helpers/ErrorBoundaryWithRetry'
interface RenderFuncProps {
search: string
}
function QueryResults({ search }: RenderFuncProps) {
const { blocks }: FlowBlockFinderQueryResponse = useLazyLoadQuery<
FlowBlockFinderQuery
>(
graphql`
query FlowBlockFinderQuery($search: String) {
blocks(search: $search) {
id
title
description
slug
blockType
}
}
`,
{ search },
{ fetchPolicy: 'store-or-network' }
)
return (
<div>
{blocks.map(block => (
<div>{block.title}</div>
))}
</div>
)
}
function Results({ search }: RenderFuncProps) {
return (
<ErrorBoundaryWithRetry
fallback={({ error }) => <div>Er is iets foutgegaan</div>}
>
<Suspense fallback={<LinearProgress />}>
<QueryResults search={search} />
</Suspense>
</ErrorBoundaryWithRetry>
)
}
export default function Asynchronous() {
const [value, setValue] = useState('')
const search = useDeferredValue(value, { timeoutMs: 600 })
const onInputChange = useCallback(
(event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setValue(event.currentTarget.value)
},
[setValue]
)
return (
<>
<TextField
label="Nieuw of bestaand blok"
fullWidth
variant="outlined"
value={value}
onChange={onInputChange}
/>
<Results search={search} />
</>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment