Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@apollo/client
Advanced tools
Package description
The @apollo/client npm package is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It is designed to help you develop faster and more secure apps with less boilerplate. It integrates seamlessly with any JavaScript front-end, allowing for reactive data fetching, caching, and data management.
Fetching data with useQuery
This feature allows you to fetch data from a GraphQL server. The useQuery hook is used to execute a GraphQL query and handle loading, error, and result states.
import { useQuery, gql } from '@apollo/client';
const GET_LAUNCHES = gql`
query GetLaunches {
launches {
id
mission_name
}
}
`;
function Launches() {
const { loading, error, data } = useQuery(GET_LAUNCHES);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return data.launches.map(({ id, mission_name }) => (
<div key={id}>
<p>{mission_name}</p>
</div>
));
}
Updating data with useMutation
This feature enables you to update data on a GraphQL server. The useMutation hook is used to execute a mutation, allowing you to create, update, or delete data.
import { useMutation, gql } from '@apollo/client';
const ADD_TODO = gql`
mutation AddTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
function AddTodo() {
let input;
const [addTodo, { data }] = useMutation(ADD_TODO);
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
addTodo({ variables: { type: input.value } });
input.value = '';
}}
>
<input
ref={node => {
input = node;
}}
/>
<button type="submit">Add Todo</button>
</form>
</div>
);
}
Managing local state
This feature allows you to manage local state using Apollo Client. You can read and write to the cache as if it were a local database, enabling you to manage client-side state alongside remote data.
import { gql, useApolloClient } from '@apollo/client';
const GET_LOCAL_STATE = gql`
query GetLocalState {
isLoggedIn @client
}
`;
function LoginButton() {
const client = useApolloClient();
const data = client.readQuery({ query: GET_LOCAL_STATE });
const isLoggedIn = data.isLoggedIn;
return (
<button onClick={() => {
client.writeQuery({
query: GET_LOCAL_STATE,
data: { isLoggedIn: !isLoggedIn }
});
}}>
{isLoggedIn ? 'Log out' : 'Log in'}
</button>
);
}
Relay is a JavaScript framework for building data-driven React applications with GraphQL. It is similar to @apollo/client in that it provides a powerful and efficient way to fetch and manage GraphQL data. Relay focuses on performance optimizations and static query generation, which can make it more suitable for complex, large-scale applications with high performance requirements.
urql is a highly customizable and versatile GraphQL client for React, Vue, Svelte, and other JavaScript frameworks. It offers a simpler and more flexible approach compared to @apollo/client, with features like document caching and subscriptions. urql's extensibility and plugin system make it a good choice for developers looking for a lightweight and adaptable GraphQL client.
Changelog
Apollo Client 3.6.5 (2022-05-23)
Restore pre-v3.6 variables
replacement behavior of ObservableQuery#reobserve
method, fixing a regression that prevented removal of variables. <br/>
@benjamn in #9741
Preserve previousData
even when different query or client provided to useQuery
, instead of resetting previousData
to undefined in those cases, matching behavior prior to v3.6.0. <br/>
@benjamn in #9734
Fix bug where onCompleted()
and onError()
are stale for useMutation()
. <br/>
@charle692 in #9740
Limit scope of DeepMerger
object reuse, and avoid using Object.isFrozen
, which can introduce differences between development and production if objects that were frozen using Object.freeze
in development are left unfrozen in production. <br/>
@benjamn in #9742
Properly merge variables
from original useLazyQuery(query, { variables })
with variables
passed to execution function. <br/>
@benjamn in #9758
Readme
Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.
All Apollo Client documentation, including React integration articles and helpful recipes, can be found at:
https://www.apollographql.com/docs/react/
The Apollo Client API reference can be found at:
https://www.apollographql.com/docs/react/api/apollo-client/
Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform:
https://odyssey.apollographql.com/
Apollo builds open-source software and a graph platform to unify GraphQL across your apps and services. We help you ship faster with:
Check out the Odyssey learning platform, the perfect place to start your GraphQL journey with videos and interactive code challenges. Join the Apollo Community to interact with and get technical help from the GraphQL community.
FAQs
A fully-featured caching GraphQL client.
We found that @apollo/client demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.