This library contains a set of utility functions to work with apollo-client for React
Using yarn
yarn add apollo-react-client graphql
Using npm
npm install apollo-react-client graphql
import { ApolloClientProvider } from 'apollo-react-client'
import AsyncStorage from '@react-native-community/async-storage';
export function App() {
return (
<ApolloClientProvider serviceURL='http://localhost:3000' storage={AsyncStorage}>
<HomeScreen />
</ApolloClientProvider>
)
}
import { ApolloClientProvider } from 'apollo-react-client'
export function App() {
return (
<ApolloClientProvider serviceURL='http://localhost:3000' storage={window.localStorage}>
<HomeScreen />
</ApolloClientProvider>
)
}
// from with in ApolloClientProvider
const { client, cache } = useApolloClient()
import { gql } from '@apollo/client'
import { useQuery } from 'apollo-react-client'
const FETCH_USER_QUERY = gql`
query fetchUser($id: ID!) {
user(id: $id) {
id
name
email
photoURL
}
}
`
interface Request {
id: string
}
interface Response {
id?: string
name?: string
email?: string
photoURL?: string
}
export function useUser(request: Request) {
return useQuery<Response | null, Request>(FETCH_USER_QUERY, request, {
skip: request?.id == null,
})
}
export function App() {
const id = 'user_id'
const [user, { loading, error }] = useUser({ id })
console.log(user?.id, user?.name, loading, error)
}
(Pagination coming soon)
import { gql } from '@apollo/client'
import { useQuery } from 'apollo-react-client'
export const FETCH_ALL_USERS_QUERY = gql`
query fetchAllUsers() {
allUsers() {
id
name
email
photoURL
}
}
`
interface Response {
id?: string
name?: string
email?: string
photoURL?: string
}
export function useAllUsers() {
return useQuery<Response[] | null, never>(FETCH_ALL_USERS_QUERY)
}
export function App() {
const [users, { loading, error }] = useAllUsers()
console.log(users, loading, error)
}
import { gql } from '@apollo/client'
import React, { useCallback } from 'react'
import { patchQuery, useMutation } from 'apollo-react-client'
import { FETCH_ALL_USERS_QUERY } from './use-users'
interface CreateUserRequest {
name: string
email: string
password: string | null
}
interface Response {
id?: string
name?: string
email?: string
photoURL?: string
}
const CREATE_USER_MUTATION = gql`
mutation createUserMutation($user: CreateUserRequest!) {
createUser(user: $user) {
id
name
email
photoURL
}
}
`
export function useCreateUser() {
return useMutation<Response, { user: CreateUserRequest }, { user: CreateUserRequest }>(
CREATE_USER_MUTATION,
{
beforeMutation: async (variables?: { user: CreateUserRequest }) => {
const { user } = variables || {}
if (!user) {
throw new Error('Invalid user')
}
// do your stuff or remap variables
return { user }
},
afterMutation: async (data?: Response | null, variables?: { user: CreateUserRequest }) => {
console.log(data, variables)
// do your stuff or remap data
return data
},
update: patchQuery<Response[], never, { createUser: Response }>(
{ query: FETCH_ALL_USERS_QUERY },
// add user to the end of list
(users, result) => [...(users || []), result?.createUser as Response],
),
},
)
}
export function App() {
const [createUser, { loading, error }] = useCreateUser()
const onCreate = useCallback(async () => {
const user = { name: 'JohnDoe', email: 'johnd@gmail.com', password: 'Password@123' }
await createUser({ user })
}, [createUser])
if (error) {
return <div className='error'>{error}</div>
}
return (
<button disabled={loading} onClick={onCreate}>
Create
</button>
)
}
import { gql } from '@apollo/client'
import { useCallback } from 'react'
import { patchQuery, useMutation } from 'apollo-react-client'
import { FETCH_ALL_USERS_QUERY } from './use-users'
const REMOVE_USER_MUTATION = gql`
mutation removeUser($id: ID!) {
removeUser(id: $id) {
id
}
}
`
interface Request {
id: string
}
interface Response {
__typename: 'User'
id?: string
}
export function useRemoveUser() {
return useMutation<Response, Request>(REMOVE_USER_MUTATION, {
optimisticResponse: (variables: Request): Response => ({
__typename: 'User',
...variables,
}),
update: patchQuery<Response[], never, { removeUser: Response }>(
{ query: FETCH_ALL_USERS_QUERY },
(users, result) => {
const removedUserId = result?.removeUser?.id
return users?.filter(store => store.id !== removedUserId) || []
},
),
})
}
export function App() {
const [removeUser, { loading, error }] = useRemoveUser()
const onRemove = useCallback(async () => {
await removeUser({ id: 'user-id' })
// do your stuff
}, [removeUser])
if (error) {
return <div className='error'>{error}</div>
}
return (
<button disabled={loading} onClick={onRemove}>
Remove
</button>
)
}