为什么使用Query不起作用，而是客户端。

发布于 2025-01-29 06:09:34 字数 2137 浏览 2 评论 0原文

我正在努力让Apolloclient使用Query在简单的React本机应用程序中工作。使用Flipper，我可以看到USEQUERY甚至不会在GraphQl端点上创建命中。在调试此问题时，我尝试使用Apolloclient的客户端。Query作为制作GraphQl查询的替代方法，并且可以使用！因此，我对为什么使用Use不起作用感到困惑。

这是显示客户端的整个app.js代码。以及结果应用程序的屏幕截图。如果有人能告诉我我要去哪里，我将非常感谢。

import React, {useState} from 'react';
import {Text, View} from 'react-native';
import {ApolloClient,InMemoryCache,ApolloProvider,gql,useQuery} from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql',
  cache: new InMemoryCache(),
});

const ALL_AREAS = gql`
  query AllAreas {
    allAreas {
      id
      name
    }
  }
`;

// Using client.query to make graphql query

function Areas1() {
  const [data, setData] = useState('Loading ...');
  client
    .query({
      query: ALL_AREAS,
    })
    .then(result => {
      console.log('Areas 1 Data: ', result.data);
      setData('Data ...');
    });
  return <Text>{data}</Text>;
}

// Using react-hook to make graphql query

function Areas2() {
  const {loading, error, data} = useQuery(ALL_AREAS);

  if (loading) {
    return <Text>Loading ...</Text>;
  }
  if (data) {
    console.log('Areas 2 Data: ', data);
    return <Text>Data ...</Text>;
  }
}

const App = () => {
  return (
    <ApolloProvider client={client}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Hello World {'\n'}</Text>
        <Text>
          client.query: <Areas1 />
        </Text>
        <Text>
          useQuery: <Areas2 />
        </Text>
      </View>
    </ApolloProvider>
  );
};

export default App;

注意：我包括控制台日志语句，并注意到来自区域2组件的控制台日志永远不会触发，而来自区域1的控制台日志确实会发射并显示了获取的数据。

我的仿真器中的结果应用看起来像这样：

我正在使用以下软件包版本：

    "@apollo/client": "^3.6.2",
    "graphql": "^16.5.0",
    "react": "17.0.2",
    "react-native": "0.68.2"

原文

I am struggling to get ApolloClient useQuery to work in a simple react native application. Using Flipper, I can see that the useQuery does not even create a hit on the graphql endpoint. In debugging this, I tried to use ApolloClient's client.query as an alternative means of making the graphql query and it worked! So I am confused about why useQuery is not working.

Here is the entire App.js code that shows client.query working but useQuery failing to fetch. And a screenshot of the resulting app. I'd really appreciate if someone could tell me where I'm going wrong.

import React, {useState} from 'react';
import {Text, View} from 'react-native';
import {ApolloClient,InMemoryCache,ApolloProvider,gql,useQuery} from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql',
  cache: new InMemoryCache(),
});

const ALL_AREAS = gql`
  query AllAreas {
    allAreas {
      id
      name
    }
  }
`;

// Using client.query to make graphql query

function Areas1() {
  const [data, setData] = useState('Loading ...');
  client
    .query({
      query: ALL_AREAS,
    })
    .then(result => {
      console.log('Areas 1 Data: ', result.data);
      setData('Data ...');
    });
  return <Text>{data}</Text>;
}

// Using react-hook to make graphql query

function Areas2() {
  const {loading, error, data} = useQuery(ALL_AREAS);

  if (loading) {
    return <Text>Loading ...</Text>;
  }
  if (data) {
    console.log('Areas 2 Data: ', data);
    return <Text>Data ...</Text>;
  }
}

const App = () => {
  return (
    <ApolloProvider client={client}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Hello World {'\n'}</Text>
        <Text>
          client.query: <Areas1 />
        </Text>
        <Text>
          useQuery: <Areas2 />
        </Text>
      </View>
    </ApolloProvider>
  );
};

export default App;

Note: I included console log statements and noticed that the console log from the Areas2 component never fires, whereas the console log from Areas1 does fire and shows the fetched data.

The resulting app in my emulator looks like this:

I am using the following package versions:

    "@apollo/client": "^3.6.2",
    "graphql": "^16.5.0",
    "react": "17.0.2",
    "react-native": "0.68.2"

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恬淡成诗 2025-02-05 06:09:34

我在 @apollo/client v3.6.2上遇到了一些问题，并且一直在尝试找到解决方案。但是现在您可以检查@apollo/client/client （v3.6.4）新实现是解决查询问题的。

UNINSTALL @APOLLO/客户端3.6.2
npm uninstall @apollo/client或yarn remove @apollo/client
立即安装新的new acte @apollo/client 3.6.6.4
npm install @apollo/client或yarn add @apollo/client
code
然后停止甲都市邦德勒并运行再次应用
ios：npm运行ios或纱ios
Android：npm运行Android或纱Android