标签: react-apollo

这是一个很奇怪的问题。

我有一个相当简单的查询，无论我触发多少次，它在 Graphiql 中都运行得很好

但在浏览器中，当我调用data.refetch(). 最奇怪的是，在 Chromium 中， Network error: Converting circular structure to JSON 如果 FF 错误是 Network error: cyclic object value

在 Chrome 中，我没有安装 redux-dev-tools，错误与 Chromium 中的错误相同

其他查询重新获取得很好，但这个查询被卡住了！当然我已经多次重启服务器，清除缓存等等。

我使用的是 apollo v2，查询没有什么特别的：

query ProductsListQuery($offset: Int!, $limit: Int!) {
  products(offset: $offset, limit: $limit) {
    items {
      id
      title
      shortDescription
      tags
      imagesIds
      __typename
    }
    total
    __typename
  }
}

结果：

{
  "data": {
    "products": {
      "items": [
        {
          "id": "5a39b5469066625581a326c4",
          "title": "Test1",
          "shortDescription": "",
          "tags": [],
          "imagesIds": {
            "main": null …

我们在电子商务网站中广泛使用 Apollo GraphQl，当路线发生变化时，我遇到了一些不必要的闪烁问题。

我的ProductTypeFilter组件被包裹在RouterandQuery组件中。使用Query来自路由的信息作为其变量，在本例中为productTypeId.

export const ProductTypeFilterContainer = () => (
  <Router>
    {({ query: { productTypeId } }) => (
      <Query query={GET_PRODUCT_FILTERS} variables={{ productTypeId }}>
        {({ error, loading, data: { productFilters } }) => {
          if (loading || error) {
            return null
          }
          return <ProductTypeFilter productFilters={productFilters} />
        }}
      </Query>
    )}
  </Router>
)

null渲染时间很短，当数据到达时就会ProductTypeFilter渲染。这按预期工作。

但是，当用户导航到不同的产品类型时，ProductTypeFilter将被卸载，然后使用新数据重新安装。只要查询加载，null就会呈现，这确实会引入不需要的“闪烁”。

这种情况仅在用户第一次访问产品类型时发生，当 Apollo 缓存第二次找到相同的query和组合variables并ProductTypeFilter …

这是我用于获取用户详细信息的示例 graphql 查询（我在 ReactJS 中使用 Apollo 客户端）

如果我只需要id和name作为响应，我使用此查询

{
 getUserDetails {
   id
   name
 }
}

或者如果我只需要id和userType我使用此查询：

{
 getUserDetails {
   id
   userType
 }
}

有什么方法可以动态传递字段名称和用户类型（基本上动态传递字段）而不是再次编写整个查询？

我收到 GraphQL 错误，但我似乎无法查明其来源。

所需类型“String!”的变量“$title” 没有提供。
所需类型“String!”的变量“$body” 没有提供。
所需类型“Int!”的变量“$price” 没有提供。

错误消息很简单。此突变需要三个必需变量，并且错误显示没有提供任何类型，即使明确提供了它们。令人困惑的部分是使用 GraphQL Playground 的相同突变工作得很好。在前端使用其他突变也能正常工作。这告诉我这不是解析器或服务器的问题。

我的突变 GraphQL 如下所示：

export const CREATE_POST_MUTATION = gql`
    mutation CreatePost($title: String!, $body: String!, $price: Int!) {
        createPost(data: {
            title: $title, body: $body, price: $price
            }
        ){
            id
            title
        }
    }
`

我正在使用 Apollo 的 React Hook：

export const CREATE_POST_MUTATION = gql`
    mutation CreatePost($title: String!, $body: String!, $price: Int!) {
        createPost(data: {
            title: $title, body: $body, price: $price
            }
        ){
            id
            title
        }
    }
`

表单的提交处理程序：

    const [createPost, …

我想向现有客户的 Apollo Link 链添加上下文链接。

这是我读过的两个 GitHub 问题：First，Second。

我不希望使用本地存储来存储令牌的文档显示在这里。

我有一个存储我的令牌的身份验证提供程序。存储我的令牌后，我想将上下文链接添加到 Apollo 客户端的链接

  const authLink = setContext((_, { headers }) => {
    const newHeaders = { ...headers };
    if (token) newHeaders.authorization = `Bearer ${token}`;

    return {
      headers: newHeaders,
    };
  });

我知道我可以通过useClient. 在创建客户端之前，如何将此链接附加到我的组件中已经存在的客户端？

link: authLink.concat(httpLink) 或者 link: authLink.concat(whateverLinksApolloHas)

我正在挖掘，graphql所以我遵循了教程，并且我坚持了这一部分。

主页.js

function Home() {
  const {
    loading,
    data: { getPosts: posts }   // <===## Here ##
  } = useQuery(FETCH_POSTS_QUERY);

  return (
      <div>
        {loading ? (
          <h1>Loading posts..</h1>
        ) : (
          posts &&
          posts.map((post) => (
            <p>
              {post.content}
            </p>
          ))
        )}
      </div>
  );
}

const FETCH_POSTS_QUERY = gql`
  {
    getPosts {
      id
      content
    }
  }
`;


export default Home;

解析器

  Query: {
    async getPosts() {
      try {
        const posts = await Post.find().sort({ createdAt: -1 });
        return posts;
      } …

我正在尝试构建一个useSubscription使用onSubscriptionData.

我看过Apollo 文档，但还没有例子。

例如：

const { loading, error, data } = useSubscription(
    INCOMING_MESSAGES_SUBSCRIPTION_QUERY,
    {
        variables: {"localUserId": Meteor.userId()},
        onSubscriptionData: myFunctionThatRunsWhenSubscriptionDataArrives
    }
);

这还不可能是正确的，因为它不包括OnSubscriptionDataOptions<TData>Apollo 文档中提到的 。

构建useSubscription使用的钩子的正确方法是什么onSubscriptionData？

使用 antd Form initialValue 哪个是正确的？

我想知道 antd form initialValue 是用来设置初始数据还是只是在表单没有值时显示值。

const Component = ({ id }) => {
  const initialName = 'John'
  const { data } = useQuery(GET_NAME, { variables: { id } })
  if (data) { 
    initialName = data.name 
  }

  return (
  <Form.Item>
    {form.getFieldDecorator('name', { initialValue: initialName })(<Input />)}
   </Form.Item>
 )
}

const Component = ({ id }) => {
  const { data } = useQuery(GET_NAME, {
    variables: { id },
    onCompleted: res => { form.setFieldsValue({ name: res.data.name }) …

首先我的问题不是重述ES6双重解构

看下面的代码——Apollo客户端GraphQL

import { gql, useQuery, useMutation } from '@apollo/client';
...
const { loading, error, data } = useQuery(TREATMENTS);

这样写会更好：

   const { loading, error, data : {treatments} } = useQuery(TREATMENTS);

但是，不幸的是我遇到了以下错误：

TypeError: Cannot read property 'treatments' of undefined
TreadDetails
C:/Users/albertly/Downloads/git/individual-claims/src/TreatDetails.tsx:35

  32 | `;
  33 | 
  34 | function TreadDetails(): React.ReactElement {
> 35 |   const { loading, error, data : {treatments} } = useQuery(TREATMENTS);
  36 |  // const [treatments, setTreatments] = useState<Treatment[]>([]);
  37 |   const { state: stateApp, dispatch: …

我是 Hooks 新手，并尝试更多地使用它们

当组件安装时，如何获取数据（使用 Apollo）？

我正在尝试在 useEffect 中使用 useQuery，到目前为止我的代码如下所示

const MyComponent = () => {
  const getME = () => {
      const { loading, error, data } = useQuery(ME);
      setMe(data.me) // useState hook
      console.log('query me: ', me);
  };

  useEffect(getME);
  return (<>
  ...
  </>)
}

但这给了我一个错误

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

编辑：这是查询

import { gql } from '@apollo/client';

export const …