How to use urql - 10 common examples

const App = () => (
   {
      let result = pageQuery(data)
      // rendering Movie while adding
      // `Movie.fragment` into the query.
      // (could be automatic in future)
      return (
        <ul>
          
        </ul>
      )
    }}
  /&gt;
)

placesIds: places && places.map(p => p.id),
    }

    await sortFollowings(followingsOrder)

    // Sort has been persisted on the server,
    // Let's exit sort mode when the new followings
    // fetched
    console.log('disabling sort mode....')
    sortMode.disableOnFollowingsFetched()
  }
}

export default Toolbar

const User = query(gql`
  query {
    user {
      id
      displayFormat
      email
      firstName
      timezone
      city
    }
  }
`)

const SortFollowings = mutation(gql`
  mutation($peopleIds: [ID!], $placesIds: [ID!]) {
    sortFollowings(peopleIds: $peopleIds, placesIds: $placesIds) {
      people {

export default ConnectHOC(() => {
  // Get user preference
  const shouldUpdate = getTimeZoneAutoUpdate()

  return {
    cache: false,
    query: shouldUpdate ? query(User) : undefined,
    mutation: {
      updateTimezone: mutation(UpdateTimezone),
    },
  }
})(DetectTimezone)

this.setState({ ...initialState, submitted: true })

    const sender = electron.ipcRenderer || false

    if (!sender) {
      return
    }

    // Refresh the main window to reflect the change
    sender.send('reload-main')

    return false
  }
}

const AddPerson = mutation(gql`
  mutation(
    $firstName: String!
    $lastName: String
    $placeId: ID
    $timezone: String
    $photoUrl: String
    $twitterHandle: String
    $photoCloudObject: String
  ) {
    addManualPerson(
      firstName: $firstName
      lastName: $lastName
      placeId: $placeId
      timezone: $timezone
      photoUrl: $photoUrl
      twitterHandle: $twitterHandle

<input value="{name}" placeholder="Find by name or username">
        

        
          
            {({ data, followUser }) =&gt;
              // Instantly hide the list if input was cleared
              name.trim() &amp;&amp;
              data &amp;&amp;
              data.allUsersByName &amp;&amp;
              data.allUsersByName.map(item =&gt; (
                 this.userPicked(item, followUser)}
                  {...item}
                /&gt;
              ))
            }

export default Toolbar

const User = query(gql`
  query {
    user {
      id
      displayFormat
      email
      firstName
      timezone
      city
    }
  }
`)

const SortFollowings = mutation(gql`
  mutation($peopleIds: [ID!], $placesIds: [ID!]) {
    sortFollowings(peopleIds: $peopleIds, placesIds: $placesIds) {
      people {
        id
      }
      places {
        id
      }
    }
  }
`)

// Variables
const spacing = p => p.theme.sizes.sidePadding
const lessSpacing = p => p.theme.sizes.sidePadding - 4
const iconBtnNormalPadding = 6 /* Used for all spacing, except the last item which has the global sidePadding */

if (!sender) {
      return
    }

    // Refresh the main window to reflect the change
    sender.send('reload-main')

    showMainWhenReady()
    closeWindow()

    return false
  }
}

const UpdatePerson = mutation(gql`
  mutation(
    $id: ID!
    $firstName: String!
    $lastName: String
    $placeId: ID
    $timezone: String
    $photoUrl: String
    $twitterHandle: String
    $photoCloudObject: String
  ) {
    updateManualPerson(
      id: $id
      firstName: $firstName
      lastName: $lastName
      placeId: $placeId
      timezone: $timezone

return new Promise((resolve, reject) => {
    try {
      pipe(
        client.executeQuery(createRequest(query, variables)),
        subscribe(({ data, error }) => {
          if (error) {
            reject(error);
          } else {
            resolve(data);
          }
        })
      );
      // eslint-disable-next-line no-empty
    } catch (err) {}
  });
}

export default function initUrqlClient(initialState) {
  // Create a new client for every server-side rendered request to reset its state
  // for each rendered page
  // Reuse the client on the client-side however
  const isServer = typeof window === 'undefined';
  if (isServer || !urqlClient) {
    ssrCache = ssrExchange({ initialState });

    urqlClient = createClient({
      url: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn',
      // Active suspense mode on the server-side
      suspense: isServer,
      exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange],
    });
  }

  // Return both the cache and the client
  return [urqlClient, ssrCache];
}

module.exports = function initUrqlClient(initialState, { url }) {
  // Create a new client for every server-side rendered request to reset its state
  // for each rendered page
  // Reuse the client on the client-side however
  const isServer = typeof window === 'undefined';
  if (isServer || !urqlClient) {
    ssrCache = ssrExchange({ initialState });

    urqlClient = createClient({
      url,
      // Active suspense mode on the server-side
      suspense: isServer,
      exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
    });
  }

  // Return both the cache and the client
  return [urqlClient, ssrCache];
};