Apollo-client: In order to initialize Apollo Client, you must specify link & cache properties on the config

[wzup]

This is really strange and demotivating using Apollo from the very beginning.

Here is your docs:

The only thing you need to get started is the endpoint for your GraphQL server. If you don’t pass in uri directly, it defaults to the /graphql endpoint on the same host your app is served from.

I pass _the only thing_ and your package throws you must specify link & cache properties on the config object.
How can it be?

Intended outcome:
Working client, working app, no erros thrown

Actual outcome:

Error: 
        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.

How to reproduce the issue:

import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-boost';

render() {
      const apolloClient = new ApolloClient({
          uri: AppSync.graphqlEndpoint,
      });
    return (
        <ApolloProvider client={apolloClient}>
            ... app
        </ApolloProvider>
    )
}

Versions
System:
OS: macOS High Sierra 10.13.4
Binaries:
Node: 8.11.3 - /usr/local/bin/node
npm: 5.6.0 - /usr/local/bin/npm
Browsers:
Chrome: 67.0.3396.99
Safari: 11.1
npmPackages:
apollo-boost: ^0.1.4 => 0.1.5
apollo-cache-inmemory: ^1.1.0 => 1.2.0
apollo-client: ^2.0.3 => 2.3.0
apollo-link: ^1.0.3 => 1.2.2
apollo-link-http: ^1.2.0 => 1.5.4
react-apollo: ^2.1.1 => 2.1.3

[hwillson]

Switch:

import { ApolloClient } from 'apollo-boost';

to

import ApolloClient from 'apollo-boost';

If you do that you'll then be using the apollo-boost version of Apollo Client, which doesn't require you to specify a link/cache. You're encountering this error because apollo-boost also exports the full version of apollo-client, as a named export, for backwards compatibility reasons. So you're referencing the full apollo-client, which requires you to pass in a link/cache.

Sorry for the confusion! We know this can be a problem, and are planning on changing this around in the future. Thanks!

[wzup]

You also can import like this:

// es6 import
import { default as ApolloClient } from 'apollo-boost';

// es5 or Node.js
const Boost = require('apollo-boost');
const ApolloClient = Boost.DefaultClient;

[curry684]

@hwillson if you know this can be a problem, why close the issue with the docs still being wrong?

[hwillson]

@curry684 I'm not aware of the docs being wrong anywhere? Can you provide a link?

[justinmpier]

For es5 / Node.js the following worked for me:

const ApolloBoost = require('apollo-boost');
const ApolloClient = ApolloBoost.default;

[bayerlse]

If I'm using

import ApolloClient from 'apollo-boost';

and define my client like:

export const apolloClient = new ApolloClient({
    uri: 'https://api.graphcms.com/simple/v1/swapi'
});

then I cant use the ApolloProvider with this client:

(20,20): Types of property 'client' are incompatible.
  Type 'typeof ApolloClient' is not assignable to type 'ApolloClient<{}>'.
    Property 'link' is missing in type 'typeof ApolloClient'.

my Versions:

"apollo-boost": "^0.1.10",
"react-apollo": "^2.1.9",

[dandv]

This should be reopen because the error points to the wrong doc, https://www.apollographql.com/docs/react/basics/setup.html. That page redirects to a page that no longer says anything about a link or cache parameter.

I was trying to import only apollo-client (I don't need the other features because I'm writing a minimal example to repro a bug):

import ApolloClient from 'apollo-client';

[arahansen]

I just ran into this too with using apollo-client. The error message points to docs that explain incorrect setup steps.

[rmariuzzo]

I just stumple upon this, can't create a simple graphql client with one custom header. That's a little bit frustrating. Not sure what to do...

I'm using apollo-boost and still get:

Error:
        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.

[MettaProgrammer]

Ran into this issue while following the tutorial, it says to use import { ApolloClient } from "apollo-client"; instead of import ApolloClient from 'apollo-boost'; but gives the same error message as people are reporting in this thread. Please fix tutorial so that it's possible to follow it without having to debug issues.

[abtrumpet]

The tutorial is still incorrect, as well. See
https://www.apollographql.com/docs/tutorial/client.html#apollo-client-setup

[underbluewaters]

I've run into so many problems with that tutorial. It makes me reconsider whether to use this library at all.

[abtrumpet]

I keep running into broken code, things that don't make sense, etc. I'm considering submitting a few PRs to make the tuts read better. It is pretty disheartening when a tutorial is so confoundingly difficult to follow.

[alxx]

I've wasted a day and couldn't get past the client initialization. The link in the error message is wrong, docs are confusing, examples are incomplete with parts missing (because they were considered to be obvious?!).

If anybody can recommend another library for GraphQL in React Native, I'm switching boats.

[gjergjk71]

I've wasted a day and couldn't get past the client initialization. The link in the error message is wrong, docs are confusing, examples are incomplete with parts missing (because they were considered to be obvious?!).

If anybody can recommend another library for GraphQL in React Native, I'm switching boats.

What makes it even worse is when every tutorial does the same thing in a different way, apollo-that apollo-this

[abdulkaderptp]

You also can import like this:

// es6 import
import { default as ApolloClient } from 'apollo-boost';

// es5 or Node.js
const Boost = require('apollo-boost');
const ApolloClient = Boost.DefaultClient;

this need to be const ApolloClient = Boost.default

[traviswimer]

If anyone is looking to do what the error says (add link & cache):

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';

const client = new ApolloClient({
  link: createHttpLink({ uri: 'http://api.githunt.com/graphql' }),
  cache: new InMemoryCache()
});

This example comes from here:
https://www.apollographql.com/docs/link/

I got this error because I was following the example on the "Integrating with React Native" page, which is definitely wrong:
https://www.apollographql.com/docs/react/recipes/react-native

[dandv]

@hwillson:

Switch:

import { ApolloClient } from 'apollo-boost';

to

import ApolloClient from 'apollo-boost';

What about gql? It's documented at https://www.apollographql.com/docs/react/essentials/get-started#creating-client to use

import { gql } from "apollo-boost";

I've switched to the default import, but trying to use

const query = ApolloClient.gql...

fails with

TypeError: apollo_boost__WEBPACK_IMPORTED_MODULE_6__.default.gql is not a function

Also, any chance to hire someone to look at this tutorial with fresh eyes and clean it up? It's rather embarrassing how many people have had problems with it.

[x3mka]

import ApolloClient, { gql } from 'apollo-boost';

[maxtheman]

@hwillson I would seriously suggest making this clearer in your docs. Just wasted hours going in a circle with an unclear error that was due to this.

[dylanwulf]

@maxtheman Apollo client v3 will be changing this behavior, and is expected to release soon. You can try out the beta with the @apollo/client npm package

[maxtheman]

That's great news, thank you!

On Wed, Feb 5, 2020, 8:12 AM Dylan Wulf [e-mail] wrote:

@maxtheman https://github.com/maxtheman Apollo client v3 will be
changing this behavior, and is expected to release soon. You can try out
the beta with the @apollo/client npm package

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/apollo-client/issues/3639?email_source=notifications&email_token=AAQSOUL7F6U2BIUWS4OF57TRBLQQDA5CNFSM4FHZGBIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK4AAAI#issuecomment-582483969,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAQSOUOEQSOZGZFM3AFB3STRBLQQDANCNFSM4FHZGBIA
.

[Arquetipo28]

Do you know if the v3 fixes this error?

[StanislavSoftermii]

Its 2020 and this combination works for me in React-Native. I feel like a hacker who achieved to hack this beautiful documentation.

Application entry point index.js

...

import { ApolloClient } from 'apollo-client';
import { ApolloProvider } from '@apollo/react-hooks';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';

...

const client = new ApolloClient({
  link: createHttpLink({ uri: 'http://api.githunt.com/graphql' }),
  cache: new InMemoryCache(),
});

...

class App extends React.Component {
...
 render() {
  return (
         ...
          <ApolloProvider client={client}>
            <Navigator ref={setNavigator} />
            <Loader />
            <CustomModal />
          </ApolloProvider>
         ...
  ); 
 }
}

package.json

...
    "apollo-boost": "^0.4.8",
    "apollo-cache-inmemory": "^1.6.6",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "react": "16.11.0",
    "react-apollo": "^3.1.5",
    "react-native": "0.62.2",
...

component file inside application

import { gql } from 'apollo-boost';
import { graphql } from '@apollo/react-hoc';

const channelsListQuery = gql`
your query 
`;

const ChannelsList = ({ data: { loading, error, channels } }) => {
  if (loading) {
    return <Text>Loading ...</Text>;
  }
  if (error) {
    return <Text>{error.message}</Text>;
  }
  return (
    <View>
      {channels.map(ch => (
        <Text key={ch.id}>{ch.name}</Text>
      ))}
    </View>
  );
};

const ChannelsListWithData = graphql(channelsListQuery)(ChannelsList);

[at1217]

Solved this issue by the following:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'your_graphql_endpoint'
  cache: new InMemoryCache(),
});