标签: react-apollo

我正在使用Apollo Client作为前端,使用Graphcool作为后端.有两个查询firstQuery和secondQuery我希望他们在序列页面打开时调用.下面是示例代码(此处未列出TestPage组件的定义):

export default compose(
        graphql(firstQuery, {
            name: 'firstQuery'
        }),
        graphql(secondQuery, { 
            name: 'secondQuery' ,
            options: (ownProps) => ({
                variables: {
                   var1: *getValueFromFirstQuery*
                }
            })
        })
)(withRouter(TestPage))

我需要var1在secondQuery从的结果firstQuery.我如何使用Apollo Client和编写？或者还有其他方法吗？提前致谢.

我在next上使用apollo，最近我注意到自定义路由破坏了SSR。通常，如果您浏览页面，则阿波罗会缓存查询，而当您下次访问页面时，它将处理缓存中的所有内容。但是，对于自定义路由，永远不会使用缓存。

我还注意到，当我单击这些页面时，控制台中会闪烁一个错误。但是它很快消失了，我无法在这里复制它。

Server.js

// 
   server.get('/about-us', (req, res) => app.render(req, res, '/about'));


   server.get('/about', (req, res) => res.redirect(301, '/about-us'));

菜单点击处理程序

const navigate = link => () => {
        Router.push(link);
    };

菜单项

export const menu = [
    {
        name: 'Home',
        url: '/',
    },
    {
        name: 'Catalogs',
        url: '/catalogs',
    },
    {
        name: 'Shop',
        url: '/shop',
    },
    {
        name: 'Wholesale',
        url: '/wholesale',
    },
    {
        name: 'About Us',
        url: '/about-us',
        prefetch: true,
    },
    {
        name: 'Contact Us',
        url: '/contact-us',
        prefetch: true,
    },
];

根据nextjs频谱的建议，我尝试在TopNav组件中预取自定义页面，但没有成功。

const prefetch …

使用我的useLazyQuery()钩子@apollo/react-hooks可以在单击按钮时执行查询。但是我不能使用它在连续点击时执行相同的查询。

export default ({ queryVariables }) => {
  const [sendQuery, { data, loading }] = useLazyQuery(GET_DIRECTION, {
    variables: queryVariables
  });

  return <div onClick={sendQuery}>Click here</div>;
}

在上面sendQuery只执行一次。

我正在使用graphql + mysql + react-apollo,这里是User表格的graphql类型之一:

type User {
  id: ID!
  name: String!
}

我有问题ID scalar type的graphql是,当主键,它是作为一个字符串返回int在MySQL和它创造与打字稿前端某种类型的冲突.

我可以根本不使用ID标量类型,因为我已经dataIdFromObject为Apollo Client中的每个对象设置了一个唯一标识符:

import {InMemoryCache} from 'apollo-cache-inmemory';

const apolloMemoryCache = new InMemoryCache(
    {
        dataIdFromObject: ({id,__typename}) => {

          return __typename+id

        }
    }
);

const client = new ApolloClient({
   link: ApolloLink.from([authLink, httpLink]),
   cache: apolloMemoryCache,
 });

你会保留ID类型还是只丢弃它？

Apollo链接提供错误处理程序 onError

问题: 目前,我们希望在apollo调用期间过期时刷新oauth令牌,并且我们无法在onError正确的内部执行异步获取请求.

码:

initApolloClient.js

import { ApolloClient } from 'apollo-client';
import { onError } from 'apollo-link-error';
import { ApolloLink, fromPromise } from 'apollo-link';

//Define Http link
const httpLink = new createHttpLink({
    uri: '/my-graphql-endpoint',
    credentials: 'include'
});

//Add on error handler for apollo link

return new ApolloClient({
    link: ApolloLink.from([
        onError(({ graphQLErrors, networkError, operation, forward  }) => {
            if (graphQLErrors) {
                //User access token has expired
                if(graphQLErrors[0].message==="Unauthorized") {
                    //We assume we have both tokens needed to run the …

我在 SSR 应用程序的初始加载时收到此错误：Warning: Text content did not match. Server: "SOME DATA" Client: "Loading..." 如何在不将loading标志设置为 true 的情况下初始化应用程序的 客户端？

我正在使用 react、express 和 apollo 设置 SSR。我从渲染器服务器获得了一个正确渲染的 HTML 数据，但是当客户端包加载时，它试图重新获取数据。Hydration 已设置，并且来自渲染器服务器的所有数据都被注入到页面的 HTML 中。

/index.js

<Query query={GET_USERS} variables={queryVariables}>
    {({
        loading,
        error,
        data
    }) => {
        if (loading) return <p>Loading...</p>;
        if (error) return `Error: ${error}`;
        return data.users.map(user => <p key={user.id}>{user.login}</p>);
    }}
</Query>

/renderer.js

export default async (req, client) => {
    const serverSideApp = (
        <ApolloProvider client={client}>
            <StaticRouter location={req.path} context={{}}>
                <div>{renderRoutes(RoutesList)}</div>
            </StaticRouter>
        </ApolloProvider>
    );
        return …

我正在开发一个应用程序，我使用 React 作为我的前端和React-apollo-graphqlAPI 调用。

我react-hooks在 React 16.8 + 中使用ie。

我在做什么

我已经创建了一个auth.js文件，当用户登录并检查令牌是否有效时，我将在其中存储我的值（我正在检查到期），但该文件仅加载我正在刷新或重新加载页面，那不是它应该如何工作

我的 auth.js 文件

const initialstate = {
    user: null,
};
if (localStorage.getItem("JWT_Token")) {
    const jwt_Token_decoded = Jwt_Decode(localStorage.getItem("JWT_Token"));
    console.log(jwt_Token_decoded.exp * 1000);
    console.log(Date.now());
    if (jwt_Token_decoded.exp * 1000 < Date.now()) {
        localStorage.clear(); // this runs only when I refresh the page or reload on route change it dosent work
    } else {
        initialstate.user = jwt_Token_decoded;
    }
}

const AuthContext = createContext({
    user: null,
    login: (userData) => …

这肯定是用户错误，但我有一个带有简单currentUser查询的应用程序，该查询在 JWT 中查找 id，查找它并返回相应的用户。

我可以查看 devtools 并看到它在缓存中__ref:User:19

export const CURRENT_USER_QUERY = gql`
  query{
    currentUser {
      id
      fullName
      email
    }
  }
`

但在我的组件中，当我const { currentUser } = client.readQuery({ query: CURRENT_USER_QUERY });这样做时（间歇性地）会爆炸，因为：

Cannot destructure property 'currentUser' of 'client.readQuery(...)' as it is null.

用户：19 存在并且是我需要的所有内容。我点击重新加载，同一页面就可以工作了。

我在客户端中将默认错误策略设置为“全部”。

这是客户端的版本3.3.11。Chrome v88.04，物有所值。反应 17.01。

我在这里错过了什么吗？如果该项目在缓存中，是否应该不同步（并且可靠地）返回值？

有没有更好的方法来处理这种情况？我正在尝试让这个应用程序不再将内容存储在 redux 或某些上下文提供程序中，因为它已经由 Apollo 处理。让一堆不同的东西来处理这个责任似乎是多余的。

我有一个组件,使用react-apollo装饰器语法显示GraphQL查询的结果.查询接受一个参数,我想根据组件状态动态设置该参数.

请考虑以下简化示例:

import * as React from ‘react’;
import { graphql } from ‘react-apollo’;
import gql from ‘graphql-tag’;

const myQuery = gql`
    query($active: boolean!) {
        items(active: $active) {

        }
    }
`;

@graphql(myQuery)
class MyQueryResultComponent extends React.Component {
    public render() {
        return <div>
            <input type=“checkbox” /* other attributes and bindings */ />
            {this.props.data.items}
        <div>;
    }
}

单击复选框时,我想重新提交查询,根据复选框的状态动态设置active属性myQuery.为简洁起见,我省略了复选框的处理程序和绑定,但是如何在状态更改时重新提交查询？

我有一些突变应该触发一些refetchQueries,但我需要这些查询有一个fetchPolicy而不是默认值.

有没有办法全局设置fetchPolicy而不是每个查询？因此,要避免在每个查询上设置fetchPolicy.