react apollo usequery code example

Example 1: variables in useQuery apollo

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
    dog(breed: $breed) {
      id
      displayImage
    }
  }
`;

function DogPhoto({ breed }) {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    
  );
}

Example 2: useLazyQuery

import React, { useState } from 'react';
import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
  const [dog, setDog] = useState(null);
  const [getDog, { loading, data }] = useLazyQuery(GET_DOG_PHOTO);

  if (loading) return 
Loading ...
;

  if (data && data.dog) {
    setDog(data.dog);
  }

  return (
    

      {dog && }
       getDog({ variables: { breed: 'bulldog' } })}>
        Click me!
      
    
  );
}

Example 3: appolo client variables pass

export default graphql(QueryTodos, {
  options: (props) => ({ variables: { userId: props.userId } })
})( Home );