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

hackintoshrao

{
  "errors": [
    {
      "message": "Name for character with ID 1002 could not be fetched.",
      "locations": [ { "line": 6, "column": 7 } ],
      "path": [ "hero", "heroFriends", 1, "name" ],
    }
  ]
}

hackintoshrao

{
  "errors": [
    {
      "extensions": {
        "path": "$.variableValues",
        "code": "validation-failed"
      },
      "message": "unexpected variables in variableValues: products"
    }
  ]

hackintoshrao

{
  "data": [{ id: 1, name: "Praveen"}],
  "errors": []
}