How to use the urql.query function in urql

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)

const Movie = ({id, onClose}) => (
  <div>
     {
        const DATA = movieQuery(data)
        return (
          <div>
            <h2>{DATA.movie.gorilla}</h2>
            <p>{DATA.movie.monkey}</p>
            <p>{DATA.chimp}</p>
          </div>
        )
      }}
    /&gt;
  </div>
)

public componentDidMount() {
    const { client, id } = this.props;

    client.executeQuery(query(ArtistQuery, { id }), true).then((res: any) => {
      setArtistViewing(res.data.artist);
    });

    client
      .executeQuery(query(ArtistBioQuery, { id }), true)
      .then((res: any) => {
        console.log('artist bio', res);
      });
  }
  public render() {

public componentDidMount() {
    const { client, id } = this.props;

    client.executeQuery(query(ArtistQuery, { id }), true).then((res: any) => {
      setArtistViewing(res.data.artist);
    });

    client
      .executeQuery(query(ArtistBioQuery, { id }), true)
      .then((res: any) => {
        console.log('artist bio', res);
      });
  }
  public render() {

const Post = ({match}) => (
   {
      if (error) return <div>Error!</div>
      if (!loaded) return <div>Loading post...</div>

      return (
        <article>
          <h1>{data.post.title}</h1>
          <div>
            <img src="{`https://media.graphcms.com/resize=w:650,h:366,fit:crop/${data.post.coverImage.handle}`}" alt="{data.post.title}">
          </div>
          </article>

    (query) => client.executeQuery(urqlQuery(SearchResultsQuery, { query }), true)
);

setDisplayFormat(newFormat)
    this.forceUpdate()
  }

  openChat = () => {
    const { data } = this.props

    if (!this.ipc) {
      return
    }

    this.ipc.send('open-chat', data && data.user)
  }
}

const FollowingList = query(gql`
  query {
    followingList {
      people {
        ...Person
      }
      places {
        ...Place
      }
    }
    pinnedList {
      ...Following
    }
    user {
      id
      city
      timezone

export default ConnectHOC(({ objectId }) => ({
  query: query(GetPlace, { id: objectId }),
  mutation: {
    updatePlace: UpdatePlace,
  },
  cache: false,
}))(PlacePage)