react apollo hooks

没那么特别的特别2024-07-04 19:10

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

TypeScript 复制代码

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

2、useQuery查询

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

TypeScript 复制代码

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

实例

TypeScript 复制代码

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的参数

TypeScript 复制代码

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

实例

TypeScript 复制代码

const [name, {data, loading, error}] = useMutation(...mutation)

//name为发生突变的实际函数
//执行name函数时，发生突变，而不是useMutation函数发生突变

TypeScript 复制代码

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时，突变就会发生