Skip to content

Instantly share code, notes, and snippets.

@betocmn
Created September 18, 2020 21:59
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save betocmn/7ab4c47ddfed7ac68a4da97828709d17 to your computer and use it in GitHub Desktop.
import { SelectField } from '@redwoodjs/forms'
import LoadingSpinner from 'src/components/LoadingSpinner/LoadingSpinner'
export const QUERY = gql`
query CITIES(
$page: Int
$limit: Int
$filter: [CitiesFilterInput]
$orderBy: [CitiesOrderByInput]
) {
cities(page: $page, limit: $limit, filter: $filter, orderBy: $orderBy) {
id
name
state
country {
id
name
}
}
}
`
export const beforeQuery = (props) => {
return { variables: props.query, fetchPolicy: 'cache-and-network' }
}
export const Loading = () => <LoadingSpinner micro />
export const Empty = () => <div>--</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({
cities,
name,
defaultValue,
className,
errorClassName,
validation,
}) => {
return (
<SelectField
name={name}
defaultValue={defaultValue}
className={className}
errorClassName={errorClassName}
validation={validation}
>
<option>Please Select</option>
{cities.map((city) => (
<option key={city.id} value={city.id}>
{city.name} | {city.country.name}
</option>
))}
</SelectField>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment