Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
apollo-client
Advanced tools
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 work seamlessly with modern React applications, providing tools for querying, caching, and updating application state.
Querying Data
This feature allows you to query data from a GraphQL endpoint. The code sample demonstrates how to set up an Apollo Client instance, define a GraphQL query, and execute it to fetch data.
const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');
const client = new ApolloClient({
uri: 'https://example.com/graphql',
cache: new InMemoryCache()
});
client.query({
query: gql`
query GetBooks {
books {
title
author
}
}
`
}).then(result => console.log(result));
Mutating Data
This feature allows you to perform mutations to modify data on the server. The code sample shows how to set up a mutation to add a new book to the database and execute it with the required variables.
const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');
const client = new ApolloClient({
uri: 'https://example.com/graphql',
cache: new InMemoryCache()
});
client.mutate({
mutation: gql`
mutation AddBook($title: String!, $author: String!) {
addBook(title: $title, author: $author) {
id
title
author
}
}
`,
variables: {
title: 'New Book',
author: 'Author Name'
}
}).then(result => console.log(result));
Caching
Apollo Client provides powerful caching capabilities to optimize data fetching and reduce network requests. The code sample demonstrates how to configure the cache with type policies to manage data normalization and caching behavior.
const { ApolloClient, InMemoryCache } = require('@apollo/client');
const client = new ApolloClient({
uri: 'https://example.com/graphql',
cache: new InMemoryCache({
typePolicies: {
Book: {
keyFields: ['id']
}
}
})
});
Relay is a JavaScript framework for building data-driven React applications. It is similar to Apollo Client in that it also uses GraphQL for data fetching and state management. Relay is known for its strong emphasis on performance and its unique approach to data fetching with static queries and compile-time optimizations.
urql is a highly customizable and lightweight GraphQL client for React. It offers a simpler API compared to Apollo Client and focuses on flexibility and ease of use. urql provides core features like querying, mutations, and caching, but allows developers to extend its functionality with additional packages.
graphql-request is a minimalistic GraphQL client for Node.js and browsers. It is much simpler than Apollo Client and does not include advanced features like caching or state management. It is ideal for use cases where you need a lightweight solution for making GraphQL requests without the overhead of a full-fledged client.
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. To get the most value out of apollo-client
, you should use it with one of its view layer integrations.
To get started with the React integration, go to our React Apollo documentation website.
Apollo Client also has view layer integrations for all the popular frontend frameworks. For the best experience, make sure to use the view integration layer for your frontend framework of choice.
Apollo Client can be used in any JavaScript frontend where you want to use data from a GraphQL server. It's:
Get started on the home page, which has great examples for a variety of frameworks.
# installing the preset package
npm install apollo-boost graphql-tag graphql --save
# installing each piece independently
npm install apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql --save
To use this client in a web browser or mobile app, you'll need a build system capable of loading NPM packages on the client. Some common choices include Browserify, Webpack, and Meteor 1.3+.
Install the Apollo Client Developer tools for Chrome for a great GraphQL developer experience!
You get started by constructing an instance of the core class ApolloClient
. If you load ApolloClient
from the apollo-boost
package, it will be configured with a few reasonable defaults such as our standard in-memory cache and a link to a GraphQL API at /graphql
.
import ApolloClient from 'apollo-boost';
const client = new ApolloClient();
To point ApolloClient
at a different URL, add your GraphQL API's URL to the uri
config property:
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'https://graphql.example.com'
});
Most of the time you'll hook up your client to a frontend integration. But if you'd like to directly execute a query with your client, you may now call the client.query
method like this:
import gql from 'graphql-tag';
client.query({
query: gql`
query TodoApp {
todos {
id
text
completed
}
}
`,
})
.then(data => console.log(data))
.catch(error => console.error(error));
Now your client will be primed with some data in its cache. You can continue to make queries, or you can get your client
instance to perform all sorts of advanced tasks on your GraphQL data. Such as reactively watching queries with watchQuery
, changing data on your server with mutate
, or reading a fragment from your local cache with readFragment
.
To learn more about all of the features available to you through the apollo-client
package, be sure to read through the apollo-client
API reference.
Read the Apollo Contributor Guidelines.
Running tests locally:
npm install
npm test
This project uses TypeScript for static typing and TSLint for linting. You can get both of these built into your editor with no configuration by opening this project in Visual Studio Code, an open source IDE which is available for free on all platforms.
If you're getting booted up as a contributor, here are some discussions you should take a look at:
FAQs
A simple yet functional GraphQL client.
We found that apollo-client demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.