查询截图

const allTeamApplicants = gql`
  query ($id: ID!) {
    allApplicants(filter: { user: { id: $id } }) {
      id
      firstName
      lastName
      appliedPosition
      applicationStage
      isFormFilled
      isContractSigned
      email
      phoneNumber
}

我在React Web应用程序中使用Apollo Client for GraphQL.任何人都知道如何使用事件中的参数调用查询,例如,我想在用户单击按钮时使用参数触发查询.

根据这些阿波罗文档,设置一个error-policy的all应使errors一个GraphQL响应提供给阵列我的阿波罗包裹阵营部件"所以(我的)UI可以使用它们." 我的应用程序是通用的,因此我使用此策略非常重要,因此错误不会阻止应用程序完全呈现.

问题是,即使我的浏览器开发工具errors在服务器响应中显示数组,我也无法在我的React组件的道具中访问它.同样,props.data.error总是未定义.为什么是这样？

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

const Cart = (props) => {
  console.log(props.errors); // undefined
  console.log(props.data.error); // undefined
  console.log(props.data.cart); // null

  return <div>Foo.</div>;
};

export default graphql(gql`
  query CartQuery {
    cart {
      products {
        _id,
        name
      }
    }
  }
`, { options: { errorPolicy: 'all' } })(Cart);


// Resolver
cart: (root, args, context) => { …

我有一个与阿波罗客户端的应用程序。当用户登录时，我可以查询客户端状态并检索用户，但是，当我刷新页面时，不再设置用户数据。

如您所见，我在我的index.js文件中设置了客户端，然后将其传递给ApolloProvider包装了整个应用程序的文件。

// index.js

const client = () => {
  const cache = new InMemoryCache()

  persistCache({
    cache,
    storage: window.localStorage
  })

  return new ApolloClient({
    uri: graphQLUri,
    credentials: 'include',
    clientState: {
      defaults: {
        locale: "en-GB",
        user: {
          __typename: "User",
          isLoggedIn: false,
          username: "",
          salesChannel: "",
          fullName: ""
        }
      },
      typeDefs: `
        enum Locale {
          en-GB
          fr-FR
          nl-NL
        }
        type Query {
          locale: Locale
        }
      `
    },
    cache
  })
}

ReactDOM.render(
  <ApolloProvider client={client()}>
      <App />
  </ApolloProvider>,
  document.getElementById("root") …

我有一个<Query />在我的Home.js文件

Home.js

<Query
      query={GET_TODOS_BY_PRODUCT}
      variables={{ id: state.get("selectedProduct.id"), completed: true }}
    >
      {({ data: { product } }) => {
        return <Main todos={product.todos} hashtag={product.hashtag} />;
      }}
</Query>

在我的Main.js文件中，我有<Mutation />组件-

Main.js

<Mutation
    key={v4()}
    mutation={SWITCH_SELECTED_PRODUCT}
    refetchQueries={() => {
        console.log("refetchQueries", product.id);
        return {
            query: GET_TODOS_BY_PRODUCT,
            variables: { id: product.id }
        };
    }}
>
{switchSelectedProduct => (
        <Product
            onClick={() => {
                switchSelectedProduct({
                    variables: { id: product.id, name: product.name }
                });
            }}
            highlight={
                data.selectedProduct
                    ? product.name === …

使用 Apollo 客户端的查询组件考虑以下内容：

  <Query {...props} query={NOTEBOOK_QUERY} variables={{ id: props.notebookId }} >
    {result => props.children(result)}
  </Query>

第一次运行时，我希望它是一个网络调用，第二次我希望它命中缓存。

是否有可以插入的工具来打印缓存是否命中或未命中，以及使用了什么密钥？

谢谢！！

AppSync通过WebSockets使用MQTT进行订阅，而Apollo使用WebSockets。无论是Subscription组件或subscribeForMore在Query我的作品组件使用时与阿波罗的AppSync。

AppSync的一项功能引起了广泛的关注，它强调实时数据。在后台，AppSync的实时功能由GraphQL订阅提供支持。虽然Apollo通过subscriptions-transport-ws将其订阅基于WebSockets，但GraphQL中的订阅实际上足够灵活，使您可以将它们基于另一种消息传递技术。AppSync的订阅使用MQTT代替WebSockets作为传输层。

有什么方法可以在仍然使用Apollo的同时使用AppSync？

我正在使用带有 Apollo 客户端的自定义 NextJS 服务器。我想在服务器端获取 GraphQL 数据，然后将其发送到客户端。我本来可以做到这一点，但客户端再次获取它。据我所知，Apollo 缓存仅在服务器上可用，然后需要发送到客户端并从那里恢复。

Apollo文档提到了 SSR，但我不想使用 Apollo 客户端完全渲染我的应用程序，我想使用 NextJS，我只想从 Apollo 客户端获取数据并将其手动注入到 HTML 中以将其恢复到客户。我查看了一些使用 Apollo 的 NextJS 示例，但没有一个示例展示了如何准确地做到这一点。

这是我的自定义请求处理程序：

const app = next({ dev: process.env.NODE_ENV !== 'production' });

const customHandler = async (req, res) => {
  const rendered = await app.renderToHTML(req, res, req.path, req.query);
  // somehow get the data from the apollo cache and inject it in the rendered html
  res.send(rendered);
}

我有一个使用Apollo钩子库的useQuery钩子的React组件。我在测试此组件时遇到问题。这是我当前的设置。

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import DashboardBar from './DashboardBar';
import { render, cleanup } from '@testing-library/react';
import { QUERY } from '../../queries';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks';
import { MockedProvider } from 'react-apollo/test-utils';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { MockLink } from 'apollo-link-mock';
import wait from 'waait';
import casual from 'casual';

describe('<DashboardBar />', () => {
  it('renders and matches …

目标

我想Authorization用访问令牌填充我的标头。我想将该访问令牌存储在 Apollo 缓存中，因为Auth0明确声明不要将访问令牌存储在本地存储中（我不知道为什么Apollo 客户端文档似乎认为这是可以的）。

如果做不到这一点，我想安全地存储我的访问令牌，并能够将其添加到 Apollo 服务器的每个 Apollo 客户端请求中。

const apolloClient = withApollo(({ctx, headers, initialState}) => {
  const cache = new InMemoryCache();

  // Code here to access local cache.

  return new ApolloClient({

    cache,
    link: new HttpLink({
      uri: <apollo server endpoint>,
      headers: {
        Authorization: `Bearer ${accessToken}`,
        'Access-Control-Allow-Origin': 'http://localhost:3000/',
        ...headers
      },
      credentials: 'include'
    }),
    typeDefs,
    resolvers
  })
})

class MyApp extends App {
  render() {
    const { Component, pageProps, apollo } = this.props;


    return ( …

我对 graphQL 和 Apollo 相当陌生。我希望我能清楚地表达自己：

我正在使用 apollo/react-hook 获取数据useQuery。然后，我用数据填充表单，以便客户可以更改它。当他完成后，数据将使用发送回服务器useMutation。

到目前为止，我习惯onCompleted将获取的数据存储在组件状态中。看起来像这样：

import React, { useState } from 'react';
import { TextField } from '@material-ui/core'; 
const Index = () => {
    const [state, setState] = useState(null)
    const {data, loading, error} = useQuery<typeof queryType>(query, {
        onCompleted: data => {
            // modify data slightly
            setState(data)
        }
    })

    return (
        <TextField value={state} onChange={() => setState(event.target.value)}/>
    )
}

然后，表单使用存储在组件状态中的值，并且表单处理程序用来setState 更改它。

我现在的问题是，这是否是最佳实践，以及是否有必要将获取的数据存储在本地组件状态中。