通过定义一个新的客户端来克服执行useQuery(ApolloClient)时的无限循环

Question

我需要在运行“useQuery”时定义“client”，但我会无限循环。

我写的代码如下：

const QueryKTP = gql`
  query {
    documents(transactionId:"${transactionId}", input: [
      {documentType:"KTP"}
    ]){
      documentResponses{
        documentType
        documentBase64
      }
      responseDescription
      responseCode
     message
    }
  }`

const anotherClient = new ApolloClient({
  uri: "https://my-url/online-service/graphql"
});

const { data, loading } = useQuery(QueryKTP, {client: anotherClient});

如果我将上面的脚本更改为如下所示（删除新客户端），将不再发生循环。

const { data, loading } = useQuery(QueryKTP);

我需要解决什么问题？谢谢

Answer 1

我注意到客户端定义不正确。您能否尝试按如下方式初始化 anotherClient：

const anotherClient = new ApolloClient({
    link: new HttpLink({
        uri: 'https://my-url/online-service/graphql'
    })
});

不要忘记在 ApolloClient 旁边导入 HttpLink。

Answer 2

我终于明白了。我遇到了同样的问题，我通过从渲染函数中排除 new ApolloClient 解决了这个问题。

实际上，我没有从你的代码中看到渲染函数，但在我的例子中，它是这样的：

之前

export default function MyComponent () {
  const anotherClient = new ApolloClient({
    uri: "https://my-url/online-service/graphql"
  });
  const { data, loading } = useQuery(QueryKTP, {client: anotherClient});
}

之后

const anotherClient = new ApolloClient({
  uri: "https://my-url/online-service/graphql"
});
export default function MyComponent () {
  const { data, loading } = useQuery(QueryKTP, {client: anotherClient});
}

就我而言，它有所帮助。您应该知道，在类似情况下只需查看 new 关键字即可。例如，当他们在 render 函数中使用 new Date()

时，人们经常会遇到相同的无限循环错误

Answer 3

在我的例子中，我有多个不同的 graphUri，具体取决于我的应用程序的网络选择。我的问题是我正在使用示例代码 ApolloWrapper，

const ApolloWrapper: (uri: string) => ApolloClient<any> | Error = (
  uri: string
) => {
  try {
    return new ApolloClient({
      link: link.concat(createHttpLink({ uri: uri })),
      cache: new InMemoryCache(),
    });
  } catch (err) {
    console.error("Failed to connect to client");
    return Error(err);
  }
};

然后将其用作

const GraphProvider: ({ children }: GProps) => any = ({ children }: GProps) => {
  const client = Client.ApolloWrapper(config?.graphUri ?? "");
  return (
    <ApolloProvider client={client as ApolloClient<any>}>
      {children}
    </ApolloProvider>
  );
};

这里的默认 uri 当然是 ''，它解析为空。

在尝试实例化 httpLink 时使用此配置显然会出错。对于无法解决的任何其他网络问题也是如此。在向 useQuery 添加一些错误检查并找到循环之前，我没有注意到这个问题。

对我来说，修复就像记忆 graphUri 一样简单，所以它不会连续抛出错误导致重新渲染，抛出错误导致重新渲染等。如下替换包装器，以便它只创建客户端的新实例当 uri 改变时。我不确定我是否错过了 Apollo 文档中的一个超级简单的解决方案，但 none 他们的东西似乎有效。

const ApolloWrapper: (uri: string) => ApolloClient<any> | Error = (
  uri: string
) => {
  const client = useMemo(() => {
    try {
      return new ApolloClient({
        link: link.concat(createHttpLink({ uri: uri })),
        cache: new InMemoryCache(),
      });
    } catch (err) {
      console.error("Failed to connect to client");
      return Error(err);
    }
  }, [uri]);
  return client;
};

通过定义一个新的客户端来克服执行useQuery(ApolloClient)时的无限循环

Overcome endless looping when executing useQuery (ApolloClient) by defining a new client

reactjs

graphql

react-apollo

apollo-client