hackintoshrao

function DogPhoto({ breed }) {

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

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

  return (

hackintoshrao

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

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

  return (

hackintoshrao

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

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

  return (
    <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />

hackintoshrao

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

hackintoshrao

<style>
  .circle {
    background-color: red;
    border-radius: 999px;
    height: 50px;
    width: 50px;
  }
</style>
<div class="circle"></div>

hackintoshrao

function Books({ onBookSelected }) {
  const { loading, error, data } = useQuery(GET_BOOKS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="book" onChange={onBookSelected}>
      {data.books.map(book => (
        <option key={book.id} value={book.title}>

hackintoshrao

import { gql, useQuery } from '@apollo/client';

const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
    }
  }
`;

hackintoshrao

<!-- Example1.astro - Static HTML is a valid Astro component! -->
<div class="example-1">
  <h1>Hello world!</h1>
</div>

hackintoshrao

{
  "errors":[
    {
      "message":"Cannot query field \"__typenam\" on type \"Query\".",
      "locations":[
        {
          "line":1,
          "column":2
        }
      ],

hackintoshrao

# prerequisite: check that Node.js is 12.20.0+, 14.13.1+, or 16+
node --version

# Make a new project directory, and navigate directly into it
mkdir my-astro-project && cd $_

# prepare for liftoff...
npm init astro

# install dependencies