Question

运行“ useQuery”时需要定义“客户端”，但结果令人满意。我无休止的循环。

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

最后，我知道了。我遇到了同样的问题，并通过从渲染函数中排除了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关键字。例如，当男人在渲染函数中使用new Date()时，他们经常遇到无限循环的相同错误

Answer 2

就我而言，我有多个不同的 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 文档中的一个超级简单的解决方案，但他们的内容似乎都不起作用。

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;
};

Answer 3

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

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

请不要忘记导入HttpLink旁边的ApolloClient。

通过定义新客户端来克服执行useQuery（ApolloClient）时的无限循环

3 个答案: