标签: react-apollo

我正在使用打字稿和 react-apollo

我的代码如下：

如果我删除最后(Index)一个错误将消失，但我不知道如何导出容器/组件。

基本上，代码有效，但打字稿对此并不满意。

我创建了一个 LoginMutation，它返回一个令牌和一个用户（带有他的 id 和名字）。这是突变模式：

const LOGIN_MUTATION = gql`
  mutation loginMutation($email: String!, $password: String!) {
    loginUser(email: $email, password: $password) {
      token
      user {
        id
        firstName
      }
    }
  }

当我在我的网站上输入令牌和用户时，graphql 服务器会很好地返回。用户已存储，我可以在我的开发工具中看到它：

我创建了一个布局组件，我想在它上面显示用户的名字。那么如何从 apollo 商店获取数据呢？

谢谢你的帮助。

下面提供了与此问题有关的文件：

登录页面.js

class LoginPage extends Component {

constructor(props) {
    super(props);
    this.state = {
        login: true, //switch between Login and SignUp
        email: '',
        password: '',
        firstName: '',
        lastName: '',
        loading: false,
        error: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
}

handleSubmit(){
    this.setState({loading: true, error: ''});
    this._confirm();
} …

我正在Network Error {"type":"WriteError"}处理我的阿波罗查询。查询在到达客户端时执行得很好。但是在他的商店里写它有问题。任何想法可能会出错？这是查询：

fragment BpmnProcessInstanceItemTask on BpmnTaskInstance {
  id
  dateStarted
  dateFinished
  task {
    name
    __typename
  }
  performer {
    name
    __typename
  }
  performerRoles
  __typename
}

fragment BpmnProcessInstanceItem on BpmnProcessInstance {
  id
  status
  process {
    name
    description
    type
    __typename
  }
  owner {
    name
    __typename
  }
  tasks {
    ...BpmnProcessInstanceItemTask
    __typename
  }
  dateStarted
  dateFinished
  __typename
}

query BpmnProcessInstancesQuery($input: BpmnProcessInstancesInput!) {
  bpmnProcessInstancesQuery(input: $input) {
    ...BpmnProcessInstanceItem
    __typename
  }
}

”

我有一个带有 GraphQL 的快速后端，当我去/graphiql手动执行一些搜索时它可以工作。我的 React 前端正在尝试在后端执行搜索。以下代码应异步执行查询：

const data = await this.props.client.query({
    query: MY_QUERY,
    variables: { initials: e.target.value }
});
console.log(data);

WhereMY_QUERY是之前定义的，代表一个我知道有效并已在/graphiql. 在我做出反应组分I出口它这样做，因为export default withApollo(MyComponent)这样它具有client可变props。

在index.js我通过 Apollo 定义的文件中，连接到/graphiql以执行查询：

//link defined to deal with errors, this was found online
const link = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
        console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
        ),
        ); …

我只想使用 React Native 和 Expo 连接到本地主机上的 Apollo 服务器。

如果我尝试使用以下 api 链接，https://q815p14lp.lp.gql.zone/graphql它可以正常工作。但是，如果我尝试使用http://127.0.0.1:8080/graphql或http://localhost:8080/graphql出现以下错误：[Network error]: TypeError: Network request failed

这是我尝试连接的代码。

const httpLink = new HttpLink({ uri: 'http://127.0.0.1:8080/graphql' });

const authLink = setContext(async (_, { headers }) => {
  const token = await getToken();

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : null,
    }
  };
});

const errorLink = onError(({ networkError, graphQLErrors }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log( …

我正在尝试 Apollo 并使用以下相关代码：

const withQuery = graphql(gql`
query ApolloQuery {
  apolloQuery {
    data
  }
}
`);

export default withQuery(props => {
  const {
    data: { refetch, loading, apolloQuery },
  } = props;

  return (
        <p>
          <Button
            variant="contained"
            color="primary"
            onClick={async () => { await refetch(); }}
          >
            Refresh
          </Button>
          {loading ? 'Loading...' : apolloQuery.data}
        </p>
  );
});

服务器延迟 500 毫秒，然后再发送{ data: `Hello ${new Date()}` }作为有效负载的响应。当我单击按钮时，我希望看到Loading...，但组件仍然会在Hello [date]半秒后显示并重新渲染。

根据此，在networkStatus应该是4（ refetch），并且因此loading应该是真实的。我的期望错了吗？或者 …

我尝试使用 React-Hooks 和 GraphQL-Apollo Client 在我的管理系统中实现搜索功能。当界面显示成功时，当我按下“搜索”按钮时，它出现了一个错误，名为：

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

我很确定useQuery是在函数内部调用的，所以我不明白是什么导致了这种情况。显示所有用户和添加新用户等其他功能运行良好。

我尝试了几种方法来实现搜索功能并在网上搜索，但仍然无法解决。这也是我第一次遇到 React-Hooks。

这是我在searchUser组件中的当前代码

import React from 'react'
import {useQuery} from 'react-apollo-hooks';
import {searchUserQ} from '../queries/queries';

const SearchUserForm = () => {
    let name = '';
    let content;

return (
    <div id="edit-user">
        <div className="field">
            <label htmlFor="name">Search UserName</label>
            <input type="text" id="name" onChange={ (event) => {
                name = event.target.value }}/>
            <button onClick={(event) => {
                event.preventDefault();
                const { data, loading, error } = useQuery(searchUserQ, {
                    variables: { name: name },
                    suspend: false …

我的应用程序包含<Apollo />基本上初始化客户端的组件。

const client = new ApolloClient({
  link: new HttpLink({
    // ...
  }),
  cache: new InMemoryCache({
    // ..
  }),
});

再往后，用户可以采取某些行动，要求我为 apollo 客户端设置一些以前没有的新标头。我最初想为此使用 react 上下文来传递设置的新标头并在内部使用它们，<Apollo />但我不确定这是否是正确的方法。

查看文档后，似乎只能在初始化时设置 apollo 标头？

如何使用带有 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 查询变量，则效果很好。但是，我没有找到来自其他查询的变量的解决方案。

我正在开发一个允许用户上传大型数据集的应用程序。上传者有一个“草稿”版本，他们可以在 UI 中编辑该版本，然后他们发布草稿的快照，所有用户都可以看到。仅当上传者登录时才应查询草稿文件。

虽然非编辑权限用户看不到草稿，但该应用程序仍会查询其整个文件集，这使得获取数据集页面非常缓慢。

该查询具有“草稿”数据的片段，包括有条件不想要的文件。如果我省略片段中的文件，则该组件适用于所有用户……但是上传者无法获取他们的草稿文件。所以这该死的，如果我这样做，该死的如果我不犹豫，我对 graphql 和 apollo 缺乏经验在这里真的很闪耀。

这是查询和随附的钩子：

export const getDatasetPage = gql`
  query dataset($datasetId: ID!) {
    dataset(id: $datasetId) {
      id
      created
      public
      following
      starred
      ...DatasetDraft
      ...DatasetPermissions
      ...DatasetSnapshots
      ...DatasetIssues
      ...DatasetMetadata
      ...DatasetComments
      uploader {
        id
        name
        email
      }
      analytics {
        downloads
        views
      }
      onBrainlife
    }
  }
  ${DatasetQueryFragments.DRAFT_FRAGMENT}
  ${DatasetQueryFragments.PERMISSION_FRAGMENT}
  ${DatasetQueryFragments.DATASET_SNAPSHOTS}
  ${DatasetQueryFragments.DATASET_ISSUES}
  ${DatasetQueryFragments.DATASET_METADATA}
  ${DATASET_COMMENTS}
`

export const DatasetQueryHook = ({ datasetId }) => {
  const {
    data: { dataset },
    loading,
    error,
  } = useQuery(getDatasetPage, {
    variables: { datasetId },
  }) …