Must specify link & cache properties on the config object.

[lasersox]

When using apolloStorybookDecorator, I get an error from apollo client that "You must specify link & cache properties on the config object". Not sure what I can do to resolve this.

[abhiaiyer91]

Do you mind posting the full error stack?

[benlucchesi]

I'm getting this same error. I'm using the client from apollo-boost...

Invariant Violation: In order to initialize Apollo Client, you must specify link & cache properties on the config object. This is part of the required upgrade when migrating from Apollo Client 1.0 to Apollo Client 2.0. For more information, please visit: https://www.apollographql.com/docs/react/basics/setup.html to help you get started.

at new InvariantError (http://localhost:9009/vendors~main.f892f6e795a157569b08.bundle.js:122397:28)
at new ApolloClient (http://localhost:9009/vendors~main.f892f6e795a157569b08.bundle.js:29903:40)
at initializeApollo (http://localhost:9009/vendors~main.f892f6e795a157569b08.bundle.js:30610:23)
at Module.<anonymous> (http://localhost:9009/main.f892f6e795a157569b08.bundle.js:1134:168)
at Module../src/stories/HomeScreen.js (http://localhost:9009/main.f892f6e795a157569b08.bundle.js:1146:30)
at __webpack_require__ (http://localhost:9009/runtime~main.f892f6e795a157569b08.bundle.js:782:30)
at fn (http://localhost:9009/runtime~main.f892f6e795a157569b08.bundle.js:150:20)
at webpackContext (http://localhost:9009/main.f892f6e795a157569b08.bundle.js:900:9)
at http://localhost:9009/main.f892f6e795a157569b08.bundle.js:21:12
at Array.forEach (<anonymous>)

[abhiaiyer91]

Thanks for the report! I def want to fix this issue! Got any idea how I can reproduce this ?

[benlucchesi]

Thank you for getting back on it! I'm very new to apollo and storybook so I'm not sure how much help I can be. I can't give you the repo I'm working in, but here's some snippets of the pertinent parts:

//---------------------------------------------------------- // App.js

// after the user authenticates, the client is initialized // - in a login handler const headers = {"Authorization":Bearer ${tokens.access_token}} this.client = new ApolloClient({ uri: "http://149.28.14.105:8080/graphql", headers: headers });

// within the render method in the app, apollo provider is only activated on a route to the homescreen // after the user has been authenticated - I lifting the provider to a higher position in the hierarchy by it // didn't make a difference. // - in the render method <ApolloProvider client={this.client}> <Route exact path="/" component={HomeScreen} /> </ApolloProvider>

//------------------------------------------------------------------- // - in the home screen... customerListQuery = gqlquery{ customerList{ id, userId, fullName, email } }

renderCustomerList = () => { console.log("rendering customer list...") return( <Query query={ this.customerListQuery } > { ( { loading, error, data } ) => { if( loading ) return

loading.....

if( error ) return

no good....

return <CustomerList customers={data.customerList} /> } } </Query> ) }

//------------------------------------------------------------------- // Homescreen.js story // this is one of the many permutations I've put this code through trying // to get it to work. I added the code for the links from a demo I found in the repo // and added the in-memory cache to the decorator to try and get apollo to quit complaining about // links and cache... no luck. Same result with or without these additions to the decorator.

import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions';

import { decorate } from '@storybook/addon-actions';

import { graphql } from 'react-apollo'; import gql from 'graphql-tag'; import apolloStorybookDecorator from 'apollo-storybook-decorator'; import { InMemoryCache } from 'apollo-cache-inmemory';

import HomeScreen from '../components/HomeScreen'; import { customerListData } from './CustomerList'

export const actions = { };

export const defaultData = { customers: customerListData.customers };

const typeDefs = ` type Query { customerList( ignoreCase: Boolean max: Int offset: Int order: String sort: String): [Customer] }

type Customer {
  userId: Int,
  fullName: String,
  email: String,
  id: Int
}

schema {
  query: Query
}

`;

const mocks = { Query: () => { return { customerList: () => { return [ {id: 1, fullName: "Ben Lucchesi", email: "[email protected]", userId: 1} ] }, }; }, };

const links = (cache) => { const linkState = withClientState({ cache, resolvers: { Mutation: { updateNetworkStatus: (_, { isConnected }, { cache }) => { const data = { networkStatus: { __typename: 'NetworkStatus', isConnected }, }; cache.writeData({ data }); return null }, }, } });

    return [
      linkState,
    ];
  }

storiesOf('HomeScreen', module) .addDecorator(apolloStorybookDecorator({typeDefs,mocks,links, cache: new InMemoryCache()})) .add('default', () => <HomeScreen {...defaultData} {...actions} /> )