How to use where clause in Knex
Create refunds with Stripe
Load HTML with Cheerio
How to send POST request with Axios
Find intersection of array in Lodash
Powered by Official white Bloop logo with a period

Terms / Privacy / Search / Support

  • import { gql, useQuery } from '@apollo/client';
    
    const GET_DOGS = gql`
      query GetDogs {
        dogs {
          id
          breed
        }
      }
    `;
    Docs
  • import React from 'react';
    import { gql, useQuery } from '@apollo/client';
    
    // Make sure that both the query and the component are exported
    export const GET_DOG_QUERY = gql`
      query GetDog($name: String) {
        dog(name: $name) {
          id
          name
          breed
        }
      }
    `;
    
    export function Dog({ name }) {
      const { loading, error, data } = useQuery(
        GET_DOG_QUERY,
        { variables: { name } }
      );
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error!</p>;
    
      return (
        <p>
          {data.dog.name} is a {data.dog.breed}
        </p>
      );
    }
    Docs
  • import React from 'react';
    import { useLazyQuery } from '@apollo/client';
    
    function DelayedQuery() {
      const [getDog, { loading, error, data }] = useLazyQuery(GET_DOG_PHOTO);
    
      if (loading) return <p>Loading ...</p>;
      if (error) return `Error! ${error}`;
    
      return (
        <div>
          {data?.dog && <img src={data.dog.displayImage} />}
          <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>
            Click me!
          </button>
        </div>
      );
    }
    Docs
  • function Feed() {
      const { loading, error, data, client } = useQuery(GET_DOGS);
    
      let content;
      if (loading) {
        content = <Fetching />;
      } else if (error) {
        content = <Error />;
      } else {
        content = (
          <DogList
            data={data.dogs}
            renderRow={(type, data) => (
              <Link
                to={{
                  pathname: `/${data.breed}/${data.id}`,
                  state: { id: data.id }
                }}
                onMouseOver={() =>
                  client.query({
                    query: GET_DOG,
                    variables: { breed: data.breed }
                  })
                }
                style={{ textDecoration: "none" }}
              >
                <Dog {...data} url={data.displayImage} />
              </Link>
            )}
          />
        );
      }
    
      return (
        <View style={styles.container}>
          <Header />
          {content}
        </View>
      );
    }
    Docs
  • import React from "react";
    import ReactDOM from "react-dom";
    import {
      ApolloClient,
      InMemoryCache,
      HttpLink,
      ApolloProvider,
      useQuery,
      gql
    } from "@apollo/client";
    
    import Pages from "./pages";
    import Login from "./pages/login";
    
    const cache = new InMemoryCache();
    const client = new ApolloClient({
      cache,
      link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
      resolvers: {},
    });
    
    const IS_LOGGED_IN = gql`
      query IsUserLoggedIn {
        isLoggedIn @client
      }
    `;
    
    cache.writeQuery({
      query: IS_LOGGED_IN,
      data: {
        isLoggedIn: !!localStorage.getItem("token"),
      },
    });
    
    function App() {
      const { data } = useQuery(IS_LOGGED_IN);
      return data.isLoggedIn ? <Pages /> : <Login />;
    }
    
    ReactDOM.render(
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>,
      document.getElementById("root"),
    );
    Docs
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples