umi-plugin-apollo
Umi plugin for apollo graphql client.
Install
$ yarn add umi-plugin-apollo # OR npm install --save umi-plugin-apollo
Setup
Having setup the umi-plugin-react
, add the umi-plugin-apollo
plugin:
// .umirc.js plugins: 'umi-plugin-react' routes: exclude: /schema\.$/ /resolvers\.$/ // other umi-plugin-react options 'umi-plugin-apollo' /* uri: 'https://my.endpoint.com/graphql', mock: true, hooksImportFrom: 'react-apollo-hooks', options: 'path/to/options/file', */
Done.
Options
name | type | default |
---|---|---|
uri | string (required in production) | process.env.GRAPHQL_URI |
mock | string (optional) | process.env.MOCK |
hooksImportFrom | 'react-apollo-hooks' | 'react-apollo' |
'react-apollo-hooks' |
options | string (optional) | ./options/apollo.js |
Options file
You can create an options file that will be used to customize the creation of ApolloClient.
Define this file on the options
field in the plugin options:
// .umirc.js plugins: 'umi-plugin-apollo' options: 'path/to/options/file'
This file can define the following fields:
// path/to/options/file.js' const cacheOptions = ; const httpLinkOptions = ; const stateLinkOptions = ; const extraLinks = ; const clientOptions = ; const providerOptions = ; const makeCache = undefined; // : ({ cacheOptions }) => Cacheconst makeHttpLink = undefined; // : ({ clientStateLink, remoteLink, httpLinkOptions }) => ApolloLinkconst makeClientStateLink = undefined; // : ({ resolvers, defaults, cache, typeDefs, stateLinkOptions }) => ApolloLinkconst makeLink = undefined; // : ({ clientStateLink, remoteLink, extraLinks }) => ApolloLinkconst makeClient = undefined; // : ({ link, cache, clientOptions }) => ApolloClientconst makeProvider = undefined; // : ({ client, providerOptions }) => ReactElement (eg: ({ children }) => <ApolloProvider client={client}>{children}</ApolloProvider)
Please, check this example.
Generators
$ umi generate apollo:page user/index
Result:
└── src/ ├── pages/ ├── user/ ├── index.css ├── index.js ├── schema.js └── resolvers.js
Runtime
Run yarn start
(or npm start
) then navigate to http://localhost:8000/user
.
Under the hood
Check the generated files on src/pages/.umi/apollo
.
License
MIT