标签: react-apollo

我正在使用react-apollo构建一个使用GraphQL API的客户端,但是,我非常坚持测试.我想要的是模拟服务器,这样我就可以轻松测试应用程序,而无需进行网络调用.

我发现了一些关于如何模拟服务器的指针:

• https://dev-blog.apollodata.com/mocking-your-server-with-just-one-line-of-code-692feda6e9cd
• http://dev.apollodata.com/tools/graphql-tools/mocking.html#addMockFunctionsToSchema

但是在我的应用测试中如何使用这个模拟服务器以避免命中服务器并没有真正的例子.

我的目标是设置集成测试以声明应用程序实际正在运行:

describe('Profile feature', () => {
  beforeAll(() => {
    store = setupStore();
    app = mount(
      <ApolloProvider store={store} client={apolloClient}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
      </ApolloProvider>
    );
  });
});

商店正在使用Redux,正在创建客户端,如下所示:

const networkInterface = createNetworkInterface({
  uri: process.env.REACT_APP_API_URL
});

export const apolloClient = new ApolloClient({
  networkInterface
});

如何在这里使用带有graphql-tools的模拟服务器而不是实际的API？

我有这个代码:https://codesandbox.io/s/507w9qxrrl

我不明白:

1)如何在以下后重新渲染()Menu组件:

this.props.client.query({
  query: CURRENT_USER_QUERY,
  fetchPolicy: "network-only"
});

如果我登录()我希望我的Menu组件重新渲染()本身.但没什么.只有当我点击Home链接时,它才会重新渲染().我怀疑是因为我用它来渲染它:

<Route component={Menu} />

在反应路由器道具中拥抱它.这是错的吗？

另外,如果this.props在login()我看到loading: true永远之后检查菜单.为什么？

2)如果未经过身份验证,如何防止Menu组件查询(例如:localStorage中没有令牌); 我在Menu组件中使用此代码:

export default graphql(CURRENT_USER_QUERY)(Menu);

3)这是正确的方法吗？

我正在尝试在新的React项目中设置Apollo GraphQL支持，但是当我尝试使用编译查询时，gql我一直收到错误消息：

Syntax Error: Expected Name, found }

这是由以下代码生成的：

import gql from 'graphql-tag'

const query = gql`
    {
      user(id: 5) {
        firstName
        lastName
      }
    }
  `

console.log(query)

我将此代码基于此处的示例代码：https : //github.com/apollographql/graphql-tag

什么是Name错误消息称？有人知道我在做什么错吗？

在我的组件中，我有以下代码：

componentDidMount () {
  // Setup subscription listener
  const { client, match: { params: { groupId } } } = this.props
  client.subscribe({
    query: HOMEWORK_IN_GROUP_SUBSCRIPTION,
    variables: { groupId },
  }).subscribe({
    next ({ data }) {
      const cacheData = client.cache.readQuery({
        query: GET_GROUP_QUERY,
        variables: { groupId },
      })

      const homeworkAlreadyExists = cacheData.group.homeworks.find(
        homework => homework._id == data.homeworkInGroup._id
      )
      if (!homeworkAlreadyExists) {
        client.cache.writeQuery({
          query: GET_GROUP_QUERY,
          variables: { groupId },
          data: { ...cacheData,
            group: { ...cacheData.group,
              homeworks: [ ...cacheData.group.homeworks,
                data.homeworkInGroup,
              ],
            },
          },
        })
      } …

"@apollo/react-hooks": "^3.1.3",
"apollo-client": "^2.6.8",

Apollo 客户端在 react 应用程序上返回 undefined 但在 gql playground 上返回数据，我不明白为什么它不能在客户端运行，但可以在 graphql playground 上运行。

架构

我为用户查询定义了联合以进行错误处理。

type Query {
  user(id: ID!): UserReturn!
}

union UserReturn = User | Error

type User {
  id: ID!
  username: String!
  email: String
  profileUrl: String
  createdAt: Date
  ads: [Doc!]!
}


type Error {
  message: String
  code: ID
}

查询解析器

 async user(_, { id }, { User }) {
    console.log('query - User')
    try {
      await delay(1000 * 3)
      const user = await User.findById(id).populate('userData')
      console.log(user) …

我有一个 Formik 表单，需要根据通过路由器传递的信息动态更改。我需要运行一个 graphQL 查询来检索一些数据并用检索到的数据填充表单。我能够设置表单并检索数据，但我无法弄清楚如何在 useEffect 挂钩中为基础表单设置字段值。我觉得我错过了一些重要的部分来访问 Formik 上下文，但我无法从文档中找到它。

任何帮助都会很棒。

import React, { useState, useEffect } from "react";
import Router, { useRouter } from "next/router";

import Container from "react-bootstrap/Container";
import { Field, Form, FormikProps, Formik } from "formik";
import * as Yup from "yup";

import { useLazyQuery } from "@apollo/react-hooks";
import { GET_PLATFORM } from "../graphql/platforms";

export default function platformsForm(props) {
  const router = useRouter();

  // grab the action requested by caller and the item to be updated (if applicable) …

我有以下react-apollo-wrapped GraphQL查询:

user(id: 1) {
  name
  friends {
    id
    name
  }
}

作为语义表示,其取出与ID 1的用户,返回其name,并返回id和name它的所有朋友的.

然后我在一个组件结构中渲染它,如下所示:

graphql(ParentComponent)
  -> UserInfo
  -> ListOfFriends (with the list of friends passed in)

这一切都对我有用.但是,我希望能够为当前用户重新获取朋友列表.

我可以this.props.data.refetch()在父组件上进行更新并传播更新; 但是,我不确定这是最好的做法,因为我的GraphQL查询看起来更像这样,

user(id: 1) {
  name
  foo1
  foo2
  foo3
  foo4
  foo5
  ...
  friends {
    id
    name
  }
}

虽然我唯一想要回复的是朋友名单.

干净地构建这个的最佳方法是什么？我正在考虑将最初跳过的GraphQL提取器绑定到ListOfFriends组件,这可以在必要时触发,但是想要了解如何最好地完成此操作.

提前致谢.

我正在学习graphql和react-apollo.我在我的代码中设置了一个搜索查询.我不确定如何将代码(即this.state.search)中的变量传递给我的grapnql调用.

我看过很多答案,包括这个答案,但似乎有点不同.

文档似乎也没有给出关于如何使用state作为变量的任何指导.

我的代码如下.

任何人都可以建议如何连接这两个？

import React, { Component} from 'react'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

class Search extends Component {

  constructor(props) {
    super(props)
    this.state = {
      search: ''
    }
  }

  updateSearch = (e) => {
    this.setState({
      search: e.target.value
    })
  }

  submitSearch = (e) => {
    e.preventDefault()
    console.log(this.state)
  }

  render() {

    const { search } = this.state;

    return (
      <form onSubmit={ this.submitSearch }>
        <input 
          type='text'
          onChange={ this.updateSearch }
          value={ search …

我正在使用AWS Appsync,我希望从成功执行的变异中获得响应.当我在Appsync Graphql控制台中尝试我的设置时,我得到一个填充的"data": { "mutateMeeting" }响应:

当我在我的反应应用程序中尝试相同时,我可以在dynamodb数据库中看到突变发生,但react-apollo不会返回突变响应.正如您在apollo开发工具中看到的那样,"data": { "mutateMeeting" }为null:

我错过了什么？

相应的graphql架构读取:

input MeetingInput {
  id: String,
  start: String!,
  end: String!,
  agreements: [AgreementInput]!
}

type Meeting {
  id: String!
  start: String!
  end: String!
  agreements: [Agreement]
}

type Mutation { 
  mutateMeeting (
    companyId: String!,
    meeting: MeetingInput!
  ): Meeting!
}

在graphql标签突变写着:

import gql from 'graphql-tag'

export default gql`
  mutation mutateMeeting($companyId: String!, $meeting: MeetingInput!) {
    mutateMeeting(companyId: $companyId, meeting: $meeting) {
      id, …

我最近一直在处理一些与钩子相关的问题，因为我一直在我的一个项目中实施钩子。我不断收到错误“渲染的钩子比上一次渲染时多”。

似乎让我的代码工作的唯一方法是将 useQuery 钩子放在所有其他钩子之后。然而，这是一个问题，因为我想用查询数据中的值填充一些状态值。

// code that doesn't error, but am not able to initialize state with query values

const [url, setUrl] = useState('')

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
  variables: {
    id: props.id,
    url
  }
})

const { data, loading, error } = useQuery(LINK_QUERY, {
  variables: {
    id: props.id
  }
})

if (loading) {
  return <div>Loading...</div>
}
if (error) {
  return <div>Error! {error.message}</div>
}

对比

// code that errors with 'Rendered more hooks than during the previous render.'

const { …