1 | # `hops-graphql`
|
2 |
|
3 | [![npm](https://img.shields.io/npm/v/hops-graphql.svg)](https://www.npmjs.com/package/hops-graphql)
|
4 |
|
5 | This is a [preset for Hops](https://github.com/xing/hops/tree/master#presets) that can be used to set up an `<ApolloProvider />` and enable server-side and client-side support for GraphQL via the Apollo framework.
|
6 |
|
7 | ### Installation
|
8 |
|
9 | _This preset must be used together with the `hops-react` preset._
|
10 |
|
11 | Add this preset and its peer dependencies `graphql-tag` and `react-apollo` to your existing Hops React project:
|
12 |
|
13 | ```bash
|
14 | $ yarn add hops-graphql@next graphql-tag react-apollo
|
15 | # OR npm install --save hops-graphql@next graphql-tag react-apollo
|
16 | ```
|
17 |
|
18 | If you don't already have an existing Hops project read this section [on how to set up your first Hops project.](https://github.com/xing/hops/tree/master#quick-start)
|
19 |
|
20 | ### CLI
|
21 |
|
22 | #### `graphql introspect`
|
23 |
|
24 | Extract information to support the `IntrospectionFragmentMatcher` from either a remote GraphQL server or from a local GraphQL schema file.
|
25 |
|
26 | This preset takes care of setting up the Apollo cache and fragment matchers - if a `fragmentsFile` is present it will use the `IntrospectionFragmentMatcher`, otherwise it will fall back to a `HeuristicFragmentMatcher`.
|
27 |
|
28 | This is not strictly necessary but is recommended if you have a more complex schema and are querying fragments on unions or interfaces.
|
29 |
|
30 | Head over to https://github.com/apollographql/react-docs/blob/master/source/initialization.md#using-fragments-on-unions-and-interfaces to read more details about this.
|
31 |
|
32 | ##### Arguments
|
33 |
|
34 | ###### `-H` / `--header`
|
35 |
|
36 | Pass additional HTTP headers that should be sent when executing the introspection query against a remote GraphQL server. For example when your server requires an authentication token or similar.
|
37 |
|
38 | This argument can be specified multiple times to add multiple HTTP headers.
|
39 |
|
40 | ### Usage
|
41 |
|
42 | In order to start using GraphQL in your application install this preset and configure the required options (see below).
|
43 |
|
44 | Check out this [integration test](https://github.com/xing/hops/tree/master/packages/spec/integration/graphql) as an example for how to use this preset.
|
45 |
|
46 | ### Configuration
|
47 |
|
48 | #### Preset Options
|
49 |
|
50 | | Name | Type | Default | Required | Description |
|
51 | | ------------------------ | --------- | ------------------------------ | -------- | ------------------------------------------------------------------------ |
|
52 | | `fragmentsFile` | `String` | `<rootDir>/fragmentTypes.json` | _no_ | Where to store the generated fragment types file |
|
53 | | `graphqlSchemaFile` | `String` | `''` | _no_ | Path to your GraphQL schema file |
|
54 | | `graphqlUri` | `String` | `''` | _yes_ | Url to your GraphQL endpoint |
|
55 | | `shouldPrefetchOnServer` | `Boolean` | `true` | _no_ | Whether Hops should execute GraphQL queries during server-side rendering |
|
56 |
|
57 | ##### `fragmentsFile`
|
58 |
|
59 | This option controls where the fragment type information that are used for the `IntrospectionFragmentMatcher` should be saved.
|
60 |
|
61 | By default executing `$ hops graphql introspect` will create a file called `fragmentTypes.json` in the application root directory.
|
62 |
|
63 | ```json
|
64 | "hops": {
|
65 | "fragmentsFile": "<rootDir>/fragmentTypes.json"
|
66 | }
|
67 | ```
|
68 |
|
69 | ##### `graphqlSchemaFile`
|
70 |
|
71 | In case your GraphQL server (configured via [`graphqlUri`](#graphqluri)) does not answer to introspection queries, you can provide the full schema as a file from which the introspection fragment matcher can generate information about unions and interfaces.
|
72 |
|
73 | ```json
|
74 | "hops": {
|
75 | "graphqlSchemaFile": "<rootDir>/schema.graphql"
|
76 | }
|
77 | ```
|
78 |
|
79 | ##### `graphqlUri`
|
80 |
|
81 | This is the full uri to your GraphQL endpoint which should be used by the client- and server-side when executing requests.
|
82 |
|
83 | This will also be used to generate fragment type information with `$ hops graphql introspect` in case no [`graphqlSchemaFile`](#graphqlschemafile) has been provided.
|
84 |
|
85 | ```json
|
86 | "hops": {
|
87 | "graphqlUri": "https://www.graphqlhub.com/graphql"
|
88 | }
|
89 | ```
|
90 |
|
91 | ##### `shouldPrefetchOnServer`
|
92 |
|
93 | Whether you want "full server-side rendering" or just "app shell" rendering.
|
94 |
|
95 | This option controls whether you want Hops to execute GraphQL queries during server-side rendering, so that the actual components with actual data will get rendered (if set to false, Hops will not fetch data during server-side rendering).
|
96 |
|
97 | ```json
|
98 | "hops": {
|
99 | "shouldPrefetchOnServer": false
|
100 | }
|
101 | ```
|
102 |
|
103 | #### Render Options
|
104 |
|
105 | This preset has only a single runtime option which can be passed to the `render()` options inside the `styled` key (see example above).
|
106 |
|
107 | | Name | Type | Default | Required | Description |
|
108 | | --------------- | ------------- | --------------------- | -------- | ------------------------------- |
|
109 | | `graphql.link` | `ApolloLink` | `ApolloHttpLink` | _no_ | An instance of a `apollo-link` |
|
110 | | `graphql.cache` | `ApolloCache` | `ApolloCacheInMemory` | _no_ | An instance of a `apollo-cache` |
|
111 |
|
112 | ##### `link`
|
113 |
|
114 | By default this preset creates an `HttpLink` with the configured [`graphqlUri`](#graphqluri). If you need a different link, you can pass the instantiated link to the render options.
|
115 |
|
116 | Read more about Apollo links here:
|
117 |
|
118 | - https://www.apollographql.com/docs/link/
|
119 | - https://www.apollographql.com/docs/react/advanced/network-layer.html
|
120 |
|
121 | ```javascript
|
122 | export default render(<MyApp />, {
|
123 | graphql: { link: new HttpLink({ uri: 'http://api.githunt.com/graphql' }) },
|
124 | });
|
125 | ```
|
126 |
|
127 | ##### `cache`
|
128 |
|
129 | By default this preset creates an [`InMemoryCache`](https://www.apollographql.com/docs/react/advanced/caching.html) which uses either the [`IntrospectionFragmentMatcher` or `HeuristicFragmentMatcher`](https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher) depending on whether fragment introspection results are available or not (create them with [`$ hops graphql introspect`](#graphql-introspect)).
|
130 |
|
131 | In case you need to configure a different Apollo cache you can pass an instantiated cache to the render options.
|
132 |
|
133 | Read more about Apollo caches here: https://www.apollographql.com/docs/react/advanced/caching.html#configuration
|
134 |
|
135 | ```javascript
|
136 | export default render(<MyApp />, {
|
137 | graphql: {
|
138 | cache: new InMemoryCache(),
|
139 | },
|
140 | });
|
141 | ```
|
142 |
|
143 | ### Mixin Hooks API
|
144 |
|
145 | #### `getApolloLink(): ApolloLink` ([override](https://github.com/untool/mixinable/blob/master/README.md#defineoverride))
|
146 |
|
147 | Hook to return a custom [ApolloLink](https://github.com/apollographql/apollo-link).
|
148 |
|
149 | Useful when the link needs access to the current request object, which only exists in the mixin context.
|
150 |
|
151 | Beware that `link` passed as render option takes precedence.
|
152 |
|
153 | #### `shouldPrefetchOnServer(): boolean` ([override](https://github.com/untool/mixinable/blob/master/README.md#defineoverride))
|
154 |
|
155 | This is an overrideable hook that can be used to customize the behavior of when Hops should prefetch data during server-side rendering. E.g. execute GraphQL queries during initial render.
|
156 |
|
157 | By default it returns whatever is configured in the [`shouldPrefetchOnServer` preset option](#shouldprefetchonserver) or `true` if the config is not set.
|
158 |
|
159 | In case you need more control over the server-side rendering you can implement this method and provide your own implementation that decides if data should be prefetched during server-side rendering.
|