标签: react-apollo-hooks

我最近刚刚开始学习 GraphQL 和 React-Apollo，我想知道如果我需要在同一个组件中使用useQuery和挂钩，推荐的使用方法是什么。useMutation由于两个钩子都返回{data, loading, error}对象，因此名称存在冲突。我应该在解构时为属性分配唯一的名称，还是将逻辑移动到单独的容器组件更好？

我正在尝试在 TypeScript 项目中创建以下形状的自定义 Apollo Client 突变挂钩：

const customApolloMutation = () => {

  const [
    mutationFunction,
    { data, loading, error, ...result } // or just {...result}
  ] = useMutation(GRAPHQL_QUERY)


  return [mutationFunction,
    { data, loading, error, ...result } // or just {...result}
  ]
}

export default customApolloMutation ;

一切看起来都很好，但是当我在不同的文件中导入自定义挂钩时，如下所示：

  const [mutationFunction, {data, loading, error}] = customApolloMutation();

...所有解构的 props 都会给出 TypeScript 错误，例如Property 'loading' does not exist on type '((options?: MutationFunctionOptions<any, OperationVariables> | undefined) => Promise<FetchResult<any, Record<string, any>, Record<string, any>>>) | { ...; …

在我的许多尝试中，我尝试将 react-apollo-hooks 和 formik 一起使用，但这似乎是不可能的。表单中的数据仅在<Formik>标签中可用，否则无法在标签之外访问。我也不能同时调用我的useMutation钩子和传递参数：

const SignUp = () => {
  const classes = useStyles();
  // The react-apollo-hook for useMutation
  // Its not hard to call this, but it seems impossible to call it,
  // with any sort of arguments.
  // It seems pointless not being able to pass in data from the form
  const [createUser, { loading }] = useMutation(CREATE_USER_MUTATION, {
    variables: {
      firstName: '???',
      lastName: '???',
      email: '???',
      password: '???',
    },
  });
  // Formik …

我正在尝试实现一个自定义挂钩来为应用程序提供访客购物车。我的钩子环绕着useMutationApollo的钩子，它将购物车 ID 保存在 cookie 中，同时还提供了一个“重置”购物车的功能（基本上，在下订单时删除 cookie）。

代码时间！（为简洁起见省略了一些代码）：

export const useGuestCart = () => {
    let cartId;
    const [createCart, { data, error, loading }] = useMutation(MUTATION_CREATE_CART);
    console.log(`Hook!`);

    if (!cartId || cartId.length === 0) {
        createCart();
    }
    if (loading) {
        console.log(`Still loading`);
    }
    if (data) {
        console.log(`Got cart id ${data.createEmptyCart}`);
        cartId = data.createEmptyCart;
    }

    const resetGuestCart = useCallback(() => {
        // function body here
    });

    return [cartId, resetGuestCart];
};

在我的组件中，我只是使用let [cartId, resetCart] = useGuestCart();.

当我运行我的单元测试（使用 Apollo 提供模拟突变）时，我看到钩子被调用了几次，输出看起来像这样：

console.log …

问题：

你好，所以我在我的 ReactJS 应用程序上使用 apollo-client 已经有一段时间了。我刚刚注意到，有时当我使用useQuery钩子时，执行完全忽略skip参数，并继续onCompleted（尽管没有任何数据）。有趣的是，它也没有向我的端点发出 API 请求。但是，如果我只是设置skip为 false，那么一切正常（如预期）。

此外，每次我使用useQuerywith时都不会发生这种情况skip，它似乎适用于某些而不是其他。

为什么 apollo 忽略skip参数并onCompleted立即使用空数据执行？有没有修复（除了useLazyQuery）？

代码示例：

const userQuery = useQuery(GET_USER, {
    variables: {
      value: userId,
    },
    skip: true,
    onCompleted: props => {
      console.log(`props => `, props)
      const {
        user: { type, role, firstName, lastName, permissions },
      } = props;

      setValue('firstName', firstName);
      setValue('lastName', lastName);
      setValue(
        'type',
        userTypes.find(({ value }) => value === type),
      );
      setValue( …

我正在尝试使用s 中的useMutation钩子react-apollo-hook来执行删除突变，但是在以下代码中我很难将帖子的 ID 值传递给突变钩子：

const Posts = () => {
    const { data, error, loading } = useQuery(GET_POST)
    const onDeleteHandler = useMutation(DELETE_POST, {
        variables: { id }
    })
    if (loading) return <div>...loading</div>
    if (error) return <div>Error</div>

    return data.posts.map(({id, title, body, location, published, author}) => {
        return  (
            <div className="card" key={id}>
                <p>id: {id}</p>
                <p>title: {title}</p>
                <p>body: {body}</p>
                <p>location: {location}</p>
                <p>published: {published}</p>
                <p>author: {author.name}</p>
                <Link to={`/post/${id}/edit`}>
                    Edit
                </Link>
                <button 
                    onClick={onDeleteHandler}>
                    Delete
                </button>
            </div>
        )
    })    
}

由于钩子不能用作回调函数，因此我不能useMutation …

那是我得到的例外......而且这对我来说没有意义......

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用程序 请参阅 fb.me/react-invalid-hook-call 以获取有关如何调试和解决此问题的提示。

这是我的组件......我正在尝试存档一个标准的登录/密码屏幕......

import React from 'react'
import { View, Text, TouchableWithoutFeedback, TextInput } from 'react- 
native'
import style from './style'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faUser, faUnlockAlt } from '@fortawesome/free-solid-svg-icons'
import { Query, useMutation } from 'react-apollo'
import { testQuery, LOGIN_MUTATION } from '../../gql/session'

class LoginForm extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        inProgress: false,
        email: 'hello@hello.com', …

如何使用带有 react-apollo-hooks 的 2 个 graphql 查询，其中第二个查询取决于从第一个查询中检索到的参数？

我尝试使用 2 个查询，如下所示：

const [o, setO] = useState()

const { loading: loadingO, error: errorO, data: dataO } = useQuery(Q_GET_O, { onCompleted: d => setO(d.getO[0].id) });

if (loadingO) { return "error" }

const { loading: loadingOP, error: errorOP, data: dataOP } = useQuery(Q_GET_OP, { variables: { o } })

但是，当我运行我的项目时，react-hooks 会给我以下消息：

“index.js:1437 警告：React 检测到 Upgrade 调用的 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读 Hooks 规则”

我想知道如何使用 react-apollo-hooks 来运行依赖于另一个查询的查询。如果预先知道 graphql 查询变量，则效果很好。但是，我没有找到来自其他查询的变量的解决方案。

我试图在提交表单/onClick 后调用 useLazyQuery，但由于某种原因我总是未定义。这是我定义钩子的方式；

const component = () => {
 const [getMyValues, {loading, error, data: myValues}] = useLazyQuery(GET_MY_VALUES);
 
 onSubmit = async () => {
   if(checkCondition){
     const someData = await getMyValues({ variables: {o: names } });
     console.log({someData})    //undefined
   }
 }
}

如何获取someData变量中的查询数据？