Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@apollo/react-hooks

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@apollo/react-hooks

React Apollo Hooks.

  • 3.1.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
151K
increased by7.47%
Maintainers
1
Weekly downloads
 
Created

What is @apollo/react-hooks?

@apollo/react-hooks is a library that provides React hooks for interacting with Apollo Client, a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. This package allows you to easily integrate GraphQL queries, mutations, and subscriptions into your React components using hooks.

What are @apollo/react-hooks's main functionalities?

useQuery

The `useQuery` hook is used to fetch data from a GraphQL endpoint. It takes a GraphQL query as an argument and returns an object containing the loading state, any errors, and the fetched data.

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

function Dogs() {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data.dogs.map(dog => (
        <li key={dog.id}>{dog.breed}</li>
      ))}
    </ul>
  );
}

useMutation

The `useMutation` hook is used to perform GraphQL mutations. It takes a GraphQL mutation as an argument and returns a tuple containing the mutate function and an object with the mutation result.

import { useMutation } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const ADD_DOG = gql`
  mutation AddDog($breed: String!) {
    addDog(breed: $breed) {
      id
      breed
    }
  }
`;

function AddDog() {
  let input;
  const [addDog, { data }] = useMutation(ADD_DOG);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addDog({ variables: { breed: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Dog</button>
      </form>
    </div>
  );
}

useSubscription

The `useSubscription` hook is used to subscribe to GraphQL subscriptions. It takes a GraphQL subscription as an argument and returns an object containing the subscription data and loading state.

import { useSubscription } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const DOG_ADDED = gql`
  subscription OnDogAdded {
    dogAdded {
      id
      breed
    }
  }
`;

function DogSubscription() {
  const { data, loading } = useSubscription(DOG_ADDED);

  if (loading) return <p>Loading...</p>;

  return <p>New dog added: {data.dogAdded.breed}</p>;
}

Other packages similar to @apollo/react-hooks

Keywords

FAQs

Package last updated on 14 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc