react apollo hooks

1、创建ApolloProvider来包装整个程序

<ApolloProvider client={client}>
    <App />
<ApolloProvider>

2、useQuery查询

工作方式usequery将返回一个数组

const {要返回的对象} = useQuery(传入参数)

实例

const query = gql`
    query name {
        whatever {
            field
        }
    }
`
 
expoprt default function Pets () {
    const {data, loading, error } = useQuery(query)
 
 
}

3、useMutation突变

useMutation与useQuery不同，useQuery返回的是一个数组，不是对象

useMutation返回的数组中，第一个参数与useQuery不同，第二个参数即为useQuery的参数

const [返回参数的数组] = useMutation(传递突变)

实例

const [name, {data, loading, error}] = useMutation(...mutation)
 
//name为发生突变的实际函数
//执行name函数时，发生突变，而不是useMutation函数发生突变

const query = gql`
    query name {
        whatever {
            field
        }
    }
`
 
expoprt default function Pets () {
    const {data, loading, error } = useQuery(query)
    const [name, {data, loading, error }] = useMutation(...mutation)
 
}

useQuery与useMutation的不同：

        执行useQuery会直接进行查询

        执行useMutation不会发生突变，突变是由useMutation中的name函数发生的，当执行name时，突变就会发生