lemol / Umi Plugin Apollo
Apollo graphql plugin for umi
Stars: ✭ 48
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Umi Plugin Apollo
Githunt React
[DEPRECATED] 🔃 An example app frontend built with Apollo Client and React
Stars: ✭ 1,036 (+2058.33%)
Mutual labels: graphql, apollographql
Get Graphql Schema
Fetch and print the GraphQL schema from a GraphQL HTTP endpoint. (Can be used for Relay Modern.)
Stars: ✭ 443 (+822.92%)
Mutual labels: graphql, apollographql
Relate
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness
Stars: ✭ 324 (+575%)
Mutual labels: graphql, apollographql
Apollo Link Maxage
An Apollo Link to invalidate cached queries
Stars: ✭ 23 (-52.08%)
Mutual labels: graphql, apollographql
Lucid
A developer tool for engineers working with React and GraphQL.
Stars: ✭ 397 (+727.08%)
Mutual labels: graphql, apollographql
Learnapollo
👩🏻🏫 Learn Apollo - A hands-on tutorial for Apollo GraphQL Client (created by Graphcool)
Stars: ✭ 5,274 (+10887.5%)
Mutual labels: graphql, apollographql
Loona
🌕 Application State Management done with GraphQL
Stars: ✭ 270 (+462.5%)
Mutual labels: graphql, apollographql
Graphql
GraphQL (TypeScript) module for Nest framework (node.js) 🍷
Stars: ✭ 697 (+1352.08%)
Mutual labels: graphql, apollographql
Offix
GraphQL Offline Client and Server
Stars: ✭ 694 (+1345.83%)
Mutual labels: graphql, apollographql
Graphback
Graphback - Out of the box GraphQL server and client
Stars: ✭ 323 (+572.92%)
Mutual labels: graphql, apollographql
Link state demo
🚀 Demonstrate how to support multiple stores in Apollo Link State
Stars: ✭ 30 (-37.5%)
Mutual labels: graphql, apollographql
Apollo Client
🚀 A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
Stars: ✭ 17,070 (+35462.5%)
Mutual labels: graphql, apollographql
Graphql Up
Get a ready-to-use GraphQL API for your schema
Stars: ✭ 415 (+764.58%)
Mutual labels: graphql, apollographql
Apollo Ios
📱 A strongly-typed, caching GraphQL client for iOS, written in Swift.
Stars: ✭ 3,192 (+6550%)
Mutual labels: graphql, apollographql
Ts Graphql Plugin
TypeScript Language Service Plugin for GraphQL developers
Stars: ✭ 479 (+897.92%)
Mutual labels: graphql, plugin
Gramps Legacy
The core data source combination engine of GrAMPS.
Stars: ✭ 198 (+312.5%)
Mutual labels: graphql, apollographql
Apollo Android
🤖 A strongly-typed, caching GraphQL client for the JVM, Android, and Kotlin multiplatform.
Stars: ✭ 2,949 (+6043.75%)
Mutual labels: graphql, apollographql
Vue Apollo
🚀 Apollo/GraphQL integration for VueJS
Stars: ✭ 5,529 (+11418.75%)
Mutual labels: graphql, apollographql
Graphql React Apollo
A GraphQL implementation in React using Apollo.
Stars: ✭ 9 (-81.25%)
Mutual labels: graphql, apollographql
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
export default {
plugins: [
['umi-plugin-react', {
routes: {
exclude: [
/schema\.(js|jsx|ts|tsx)$/,
/resolvers\.(js|jsx|ts|tsx)$/,
],
},
// 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'` |
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
export default {
plugins: [
['umi-plugin-apollo', {
options: 'path/to/options/file',
}],
]
}
This file can define the following fields:
// path/to/options/file.js'
export const cacheOptions = {
};
export const httpLinkOptions = {
};
export const stateLinkOptions = {
};
export const extraLinks = [
];
export const clientOptions = {
};
export const providerOptions = {
};
export const makeCache = undefined; // : ({ cacheOptions }) => Cache
export const makeHttpLink = undefined; // : ({ clientStateLink, remoteLink, httpLinkOptions }) => ApolloLink
export const makeClientStateLink = undefined; // : ({ resolvers, defaults, cache, typeDefs, stateLinkOptions }) => ApolloLink
export const makeLink = undefined; // : ({ clientStateLink, remoteLink, extraLinks }) => ApolloLink
export const makeClient = undefined; // : ({ link, cache, clientOptions }) => ApolloClient
export const 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].