标签: react-apollo-hooks

使用我的useLazyQuery()钩子@apollo/react-hooks可以在单击按钮时执行查询。但是我不能使用它在连续点击时执行相同的查询。

export default ({ queryVariables }) => {
  const [sendQuery, { data, loading }] = useLazyQuery(GET_DIRECTION, {
    variables: queryVariables
  });

  return <div onClick={sendQuery}>Click here</div>;
}

在上面sendQuery只执行一次。

我在我的 React 项目中使用 apollo-graphql ，并且收到以下错误

无效的挂钩调用。钩子只能在函数组件体内调用

这是我的代码

import React, { useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";

// **************** COMPONENTS ****************
import { GET_MORTGAGE_JOURNEY } from "../../../../Graphql/Journeys/query";

export default function index() {
  const insuranceId = useSelector((state) => state.mortgage.insuranceId);

  // Panels Heading to show on all panels

  useEffect(() => {
    if (insuranceId) {
      getMortgageData(insuranceId);
    }
  }, [insuranceId]);

  function getMortgageData(insuranceId) {
    const { loading, error, data } = useQuery(GET_MORTGAGE_JOURNEY, {
      variables: { id: insuranceId },
    }); …

我有一个用于 apollo 延迟查询的自定义去抖动钩子：

import {useLazyQuery} from '@apollo/react-hooks';
import debounce from "lodash/debounce";

export function useDebouncedQuery(schema) {
    const [doQuery, {...rest}] = useLazyQuery(schema);

    const query = React.useCallback(debounce(doQuery, 1000), []);

    return [query, {
        ...rest
    }]
}

除了onCompleted选项之外，这有效。当实现这样的钩子时：

const [doQuery] = useDebouncedQuery(query);
doQuery({
    onCompleted: data => {
        console.log(data);
    }
})

...该onCompleted选项不会触发。但是，如果我将钩子更改为：

export function useAsyncSelectQuery(schema, options) {
    const [doQuery, {...rest}] = _useLazyQuery(schema, options);
    ...

..并像这样实现它，它的工作原理：

const [doQuery] = useDebouncedQuery(query, {
    onCompleted: data => {
        console.log(data);
    }
});

为什么是这样？难道我做错了什么？我有单独的逻辑需要处理传递到onCompleted不同位置的数据，因此在查询初始化时我无法传递该选项。任何帮助是极大的赞赏。

我useQuery像这样使用钩子：

function Foo() {
  const { data, error, loading } = useQuery(MY_QUERY, { pollInterval: 1000 });

  return (
    <>
      <Bar/>
      <Baz/>
      {data}
    </>
  );
}

现在，无论是Bar与Baz使用相同的查询。Baz是一个侧边栏，我想在它处于活动状态时禁用轮询。

我有一个用于处理状态的全局减速器Baz，我像这样修改了它：

if (isSidebarOpen === false) {
  ...
  apolloClient.stop();
} else {
  // TODO
}

这会停止轮询，但我不知道如何在侧边栏关闭时重新激活它（即在else上面的块中）。

我这样做正确吗？是否有不同的方法可以使用 Apollo 切换 GraphQL 查询的轮询？

在我的查询中，我混合使用了远程和本地属性。本地属性具有不同的值，具体取决于：

1. 远程属性
2. 当前的unix时间戳

本地解析器根据这些规则计算本地状态。现在，我面临一个场景，我需要放弃useQuery并使用 Apollo Clientquery来增强灵活性。

除了结构上的差异（例如，useQuery接受两个参数，而client.query只接受一个参数 - 选项对象），使用一个比另一个更安全吗？

我确定了文档中未描述的至少一个差异。当我client.query多次调用时，本地解析器在开始时只运行一次。使用useQuery，数据总是被重新计算并且它有不同的值（如上面的#2）。

由于Hooks的规则，不应有条件地调用 hooks。那么如何使用 有条件地获取数据useQuery呢？例如，假设我想在功能组件中获取数据，但前提是someState === someValue? 即我想避免useQuery()在任何条件之前调用，因为在这些时间获取数据没有意义。

我正在使用最优秀的react-apollo-hooks 库，特别是 useQuery 钩子：

function Index() {
    ...
    const [dialogOpen, setDialogOpen] = useState({ show: false, id: '0' });
    ...   
    const { data, error } = useQuery(GET_JOBS, { suspend: true });
    if (error) {
        return <div>Error! {error.message}</div>;
    }
    const jobs = data.cxJobs; //This is our data
    ....
    function editCallback(e, more) {
        setDialogOpen({ show: true, id: e });
    }
....
}

当然，一旦我更改了 dialogOpen 状态，组件就会重新渲染并再次执行 graphql 查询。根据对库github repo的建议，我重写了代码以设置一些状态以及 useEffect：

function Index() {
    ...
    const [dialogOpen, setDialogOpen] = useState({ show: …

我有一个使用Apollo钩子库的useQuery钩子的React组件。我在测试此组件时遇到问题。这是我当前的设置。

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import DashboardBar from './DashboardBar';
import { render, cleanup } from '@testing-library/react';
import { QUERY } from '../../queries';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks';
import { MockedProvider } from 'react-apollo/test-utils';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { MockLink } from 'apollo-link-mock';
import wait from 'waait';
import casual from 'casual';

describe('<DashboardBar />', () => {
  it('renders and matches …

当我useMutation与 react native 一起使用时，出现未处理的承诺拒绝错误。这是产生问题的代码：

const [createUser, { error, loading }] = useMutation(CREATE_USER_MUTATION);

每当我的 graphql 服务器向客户端返回错误时，我都会收到未处理的承诺拒绝错误（下面的屏幕截图）。我可以通过添加这样的错误处理程序来让它消失，但这似乎是一个黑客。有什么想法吗？我做错了什么还是阿波罗人应该解决这个问题？

const [createUser, { error, loading }] = useMutation(CREATE_USER_MUTATION, {
  onError: () => {}
});

我在反应项目中使用 useMutation 钩子。突变成功运行，但之后没有达到 onCompleted 。

我已经在突变中将 notifyOnNetworkStatusChange 设置为 true ，但这似乎没有帮助。

const [createUser] = useMutation(SIGNUP_MUTATION);

createUser({
  variables: {
     firstname,
     lastname,
     email
  },
  notifyOnNetworkStatusChange: true,
  onCompleted: (data) => {
     // not called
     confirm(data);
  }
});