Apollo接入RN记录

发表于 | 更新于 | 分类于 | 阅读次数：

引入

接入RN主要通过@apollo/react-hooks的ApolloProvider进行注册

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from './src/apollo/ApolloClient';
import AppContainer from './src/router';

export default () => {
  return (
    <ApolloProvider client={ApolloClient}>
      <AppContainer />
    </ApolloProvider>
  );
};

用@apollo/react-hoc的高阶组件graphql实现查询/突变并将结果注入RN组件

1
2
3
import { graphql } from '@apollo/react-hoc'；

export default graphql(gql`...`)(component);

调试工具

问题及解决方案

  • 单个组件实现多个查询/突变，官方文档写的compose方法无法调用。查询源码发现最新版本代码已经移除了compost方法，需要自己写一个。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    compose(...funcs: Function[]) {
      const functions = funcs.reverse();
      return function(...args: any[]) {
        const [firstFunction, ...restFunctions] = functions;
        let result = firstFunction.apply(null, args);
        restFunctions.forEach(fnc => {
          result = fnc.call(null, result);
        });
        return result;
      };
    }

  • .graphql文件无法使用。由于RN没有使用webpack，无法通过loader读取。需要安装babel-plugin-import-graphql这个插件，这个插件使用export导出，引入方式和loader不同

    1
    import { customers } from './login.graphql';

  • resolvers中引入的变量无法正常使用，且不报错。原因：不能使用和重名的变量，报错只能通过查询返回的props.data.error查看

    1
    import { customers as customersQuery } from './login.graphql';

  • 本地resolvers处理带参数的查询，需要先不传参数获取所有结果，然后根据传入变量筛选后返回，readQuery的variables无法查询数组。

0%