import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

const client = new ApolloClient({
  uri: 'https://api.01.software/api/graphql',
  cache: new InMemoryCache(),
  headers: {
    authorization: `Bearer ${token}`
  }
})

// Execute query
const { data } = await client.query({
  query: gql`
    query GetProducts {
      Products(limit: 10) {
        docs {
          id
          name
          price
        }
      }
    }
  `
})

import { createClient, useQuery } from 'urql'

const client = createClient({
  url: 'https://api.01.software/api/graphql',
  fetchOptions: {
    headers: {
      authorization: `Bearer ${token}`
    }
  }
})

function ProductList() {
  const [result] = useQuery({
    query: `
      query {
        Products(limit: 10) {
          docs {
            id
            name
            price
          }
        }
      }
    `
  })

  if (result.fetching) return <div>Loading...</div>
  if (result.error) return <div>Error: {result.error.message}</div>

  return (
    <ul>
      {result.data.Products.docs.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  )
}