import { useApolloClient } from '@apollo/client';
function SomeComponent() {
const client = useApolloClient();
// `client` is now set to the `ApolloClient` instance being used by the
// application (that was configured using something like `ApolloProvider`)
}
function SomeComponent() {
const client = useApolloClient();
// `client` is now set to the `ApolloClient` instance being used by the
// application (that was configured using something like `ApolloProvider`)
}
import React from 'react';
import { render } from 'react-dom';
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
useQuery,
gql
} from "@apollo/client";
const client = new ApolloClient({
uri: 'https://48p1r2roz4.sse.codesandbox.io',
cache: new InMemoryCache()
});
function App() {
return (
<div>
<h2>My first Apollo app 🚀</h2>
</div>
);
}
render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root'),
);
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>
);
};
import React from "react";
import { gql, useQuery } from "@apollo/client";
import Todo from "./Todo";
const GET_TODOS = gql`
query GetTodos {
todos @client {
id
completed
text
}
visibilityFilter @client
}
`;
function TodoList() {
const { data: { todos, visibilityFilter } } = useQuery(GET_TODOS);
return (
<ul>
{getVisibleTodos(todos, visibilityFilter).map(todo => (
<Todo key={todo.id} {...todo} />
))}
</ul>
);
}