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

  • mutate({
      //... insert comment mutation
      refetchQueries: [{
        query: gql`
          query UpdateCache($repoName: String!) {
            entry(repoFullName: $repoName) {
              id
              comments {
                postedBy {
                  login
                  html_url
                }
                createdAt
                content
              }
            }
          }
        `,
        variables: { repoName: 'apollographql/apollo-client' },
      }],
    })
    Docs
  • import { NetworkStatus } from '@apollo/client';
    
    function DogPhoto({ breed }) {
      const { loading, error, data, refetch, networkStatus } = useQuery(
        GET_DOG_PHOTO,
        {
          variables: { breed },
          notifyOnNetworkStatusChange: true,
        },
      );
    
      if (networkStatus === NetworkStatus.refetch) return 'Refetching!';
      if (loading) return null;
      if (error) return `Error! ${error}`;
    
      return (
        <div>
          <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
          <button onClick={() => refetch()}>Refetch!</button>
        </div>
      );
    }
    Docs
  • const results = await client.refetchQueries({
      updateCache(cache) {
        cache.evict({ fieldName: "someRootField" });
      },
    
      onQueryUpdated(observableQuery) {
        // Logging and/or debugger breakpoints can be useful in development to
        // understand what client.refetchQueries is doing.
        console.log(`Examining ObservableQuery ${observableQuery.queryName}`);
        debugger;
    
        // Proceed with the default refetching behavior, as if onQueryUpdated
        // was not provided.
        return true;
      },
    });
    
    results.forEach(result => {
      // These results will be ApolloQueryResult<any> objects, after all
      // results have been refetched from the network.
    });
    Docs
  • import React from "react";
    import { ApolloConsumer, useApolloClient, useQuery, gql } from "@apollo/client";
    
    const GET_MESSAGE_COUNT = gql`
      query GetMessageCount {
        messageCount @client {
          total
        }
      }
    `;
    
    const resolvers = {
      Query: {
        messageCount: (_, args, { cache }) => {
          // ... calculate and return the number of messages in
          // the cache ...
          return {
            total: 123,
            __typename: "MessageCount",
          };
        },
      },
    };
    
    export function MessageCount() {
      const client = useApolloClient();
      client.addResolvers(resolvers);
    
      const { loading, data: { messageCount } } = useQuery(GET_MESSAGE_COUNT);
    
      if (loading) return "Loading ...";
    
      return (
        <p>
          Total number of messages: {messageCount.total}
        </p>
      );
    };
    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