How to use graphql-hooks - 10 common examples

function create(initialState = {}) {
  return new GraphQLClient({
    ssrMode: isServer,
    url: 'https://rickandmortyapi.com/graphql',
    cache: memCache({ initialState }),
    fetch: typeof window !== 'undefined' ? fetch.bind() : unfetch, // eslint-disable-line
  });
}

function create(initialState = {}) {
  return new GraphQLClient({
    ssrMode: typeof window === 'undefined',
    url: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn',
    cache: memCache({ initialState }),
    fetch: typeof window !== 'undefined' ? fetch.bind() : unfetch, // eslint-disable-line
  })
}

function create(initialState = {}) {
  return new GraphQLClient({
    ssrMode: typeof window === 'undefined',
    url: process.env.DATENGUIDE_API,
    cache: memCache({ initialState }),
    fetch: typeof window !== 'undefined' ? fetch.bind() : unfetch // eslint-disable-line
  })
}

export default function PostUpvoter({ votes, id, onUpdate }) {
  const [updatePost] = useMutation(UPDATE_POST)

  return (
    <button> {
        try {
          const result = await updatePost({
            variables: {
              id,
              votes: votes + 1,
            },
          })

          onUpdate &amp;&amp; onUpdate(result)
        } catch (e) {
          console.error('error upvoting post', e)
        }</button>

export default function Submit({ onSubmission }) {
  const [createPost, state] = useMutation(CREATE_POST)

  return (
    <form> handleSubmit(event, onSubmission, createPost)}&gt;
      <h1>Submit</h1>
      <input required="" type="text" placeholder="title">
      <input required="" type="url" name="url" placeholder="url">
      <button type="submit">{state.loading ? 'Loading...' : 'Submit'}</button>
      <style>{`
        form {
          border-bottom: 1px solid #ececec;
          padding-bottom: 20px;
          margin-bottom: 20px;
        }
        h1 {
          font-size: 20px;
        }</style></form>

function AddPost({ onSuccess }: { onSuccess: () => void }) {
  const [title, setTitle] = useState('')
  const [url, setUrl] = useState('')
  const [createPost, { loading, error }] = useMutation(createPostMutation)

  async function handleSubmit(e: any) {
    e.preventDefault()
    await createPost({ variables: { title, url } })
    onSuccess && onSuccess()
  }

  return (
    <form>
      <label>Title:</label>
      <input required="" value="{title}"> setTitle(e.currentTarget.value)}
      /&gt;</form>

export default function CreatePost({ onSuccess }) {
  const [createPost, { loading, error }] = useMutation(createPostMutation)

  async function handleSubmit({ title, url }) {
    await createPost({ variables: { title, url } })
    onSuccess && onSuccess()
  }

  return (
    
  )
}

function Post() {
  const [id, setId] = useState('')
  const [getPosts, { error, data }] = useManualQuery(postQuery)

  async function handleSubmit(e: any) {
    e.preventDefault()
    await getPosts({ variables: { id } })
  }

  return (
    <>
      <h2>Search by ID</h2>
      <form>
        <label>ID:</label>
        <input required="" value="{id}"> setId(e.currentTarget.value)}</form>

const useSearchManager = (initialMeasures, initialRegions) => {
  const [fetchSchema] = useManualQuery(SCHEMA_QUERY)
  const [fetchRegion] = useManualQuery(REGION_QUERY)

  const asyncActions = useMemo(
    () => ({
      syncUrl: () => async (dispatch, getState) => {
        Router.push({
          pathname: '/statistics',
          query: stateToQueryArgs(getState())
        })
      },
      loadMeasure: id => async dispatch => {
        const [statisticId, measureId] = id.split(':')
        dispatch(actions.setLoading())
        const schema = await fetchSchema({
          variables: {
            measures: [{ statisticId, measureId }]

const useSearchManager = (initialMeasures, initialRegions) => {
  const [fetchSchema] = useManualQuery(SCHEMA_QUERY)
  const [fetchRegion] = useManualQuery(REGION_QUERY)

  const asyncActions = useMemo(
    () => ({
      syncUrl: () => async (dispatch, getState) => {
        Router.push({
          pathname: '/statistics',
          query: stateToQueryArgs(getState())
        })
      },
      loadMeasure: id => async dispatch => {
        const [statisticId, measureId] = id.split(':')
        dispatch(actions.setLoading())
        const schema = await fetchSchema({
          variables: {
            measures: [{ statisticId, measureId }]
          }