【エラー解決】ApolloClient(GraphQL) x React Hooks x apollo-react x apollo-react-hooks x graphql

ApolloClient(GraphQL) x React Hooks で出た可愛いエラーErrorへの対応.md

【エラー解決】ApolloClient(GraphQL) x React Hooks x apollo-react x apollo-react-hooks x graphql

1.Uncaught Error: Could not find "client" in the context or passed in as a prop. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via props.

contextの中にclientが見つからないか、propsとして渡ってきてません。ApolloProviderの中の root componentをラップするか、propsをとおしてApolloClient instanceを渡してください

For Example, you see like this below code. It's occur Error.

import { useQuery } from "react-apollo-hooks"
.
.
.
const Hoge = () => {
 const { data, error, loading } = useQuery(currentUserQuery);//Error here!!
}

from

  <ApolloProvider client={client}>
      <BrowserRouter>
        <App appState={window.__APP_STATE__} />
      </BrowserRouter>
  </ApolloProvider>

to

import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks';
.
.
.
  <ApolloProvider client={client}>
    <ApolloHooksProvider client={client}>
      <BrowserRouter>
        <App appState={window.__APP_STATE__} />
      </BrowserRouter>
    </ApolloHooksProvider>
  </ApolloProvider>

see : https://github.com/trojanowski/react-apollo-hooks

2.Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

from

useEffect(() => {
  setCookie("invitation", queryString.code);
  const { data, error, loading } = useQuery(currentUserQuery);
  if (loading) {
    return <div style={{ background: "red" }}>Loading...</div>;
  };
  if (error) {
    return <div>Error! {error.message}</div>;
  };
}, []);

to

 useEffect(() => {
   setCookie("invitation", queryString.code);
 }, []);
 const { data, error, loading } = useQuery(currentUserQuery);
  if (loading) {
   return <div style={{ background: "red" }}>Loading...</div>;
  };
  if (error) {
   return <div>Error! {error.message}</div>;
  };

2.Warning: Failed prop type: The prop mutation is marked as required in Mutation, but its value is undefined.

Mutationにpropsでmutationを指定して渡すのは必須だが、それが undefinedだ

to

  <Mutation mutate={mutate} variables={variables} > // mutate
    {(mutate, { data, loading, error }) => (
      <React.Fragment>
        <DoMutation mutate={mutate} />
        {children && children(mutate, { data, loading, error })}
      </React.Fragment>
    )}
  </Mutation>

to

  <Mutation mutation={mutate} variables={variables} > // mutation
    {(mutate, { data, loading, error }) => (
      <React.Fragment>
        <DoMutation mutate={mutate} />
        {children && children(mutate, { data, loading, error })}
      </React.Fragment>
    )}
  </Mutation>

Uncaught Invariant Violation: query option is required. You must specify your GraphQL document in the query option.

from

client.query(searchMyStartUpQuery, { variables: { id: store.user.id } }).then((data)

to

client.query({query: searchMyStartUpQuery, variables: { id: store.user.id } }).then((data)

Store error: the application attempted to write an object with no provided id but the store already contains an id of Account:57 for this object. The selectionSet that was trying to be written is:

if you seen blow a query this case is account

account {
  firstName
  lastName
  __typename
}
    at new ApolloError (ApolloError.ts?5b7e:45)

add id

const unreadMessagesQuery = gql`query {
  unreadMessages {
    messageThreads {
      firstMessage {
        account {
          firstName
          lastName
        }
        message
        id
      }
      lastMessage {
        account{
          firstName
          lastName
        }
      }
    }
  }
}
`;
``
to
```js
const unreadMessagesQuery = gql`query {
  unreadMessages {
    messageThreads {
      firstMessage {
        account {
          firstName
          lastName
          id //add!!!!!!!!
        }
        message
        id
      }
      lastMessage {
        account{
          firstName
          lastName
          id //add!!!!!!!!
        }
      }
    }
  }
}
`;

TypeError: update_1 is not a function. (In 'update_1(c, mutation.result)', 'update_1' is an instance of Array)

subscriptionData.data.[here],返す型が合っていない

from

updateQuery: (prev, {subscriptionData}) => {
  if(!subscriptionData.data) return prev;
  console.log(prev.messages, "...prev.messages,");
  return {
    messages: {
      nodes: [
        ...prev.messages.nodes,
        subscriptionData.data.messagePublished,
      ],
    }
  };
}

to
```js
updateQuery: (prev, {subscriptionData}) => {
 if(!subscriptionData.data) return prev;
 return {
   messages: {
     ...prev.messages,
     nodes: [
       subscriptionData.data.messagePublished,
       ...prev.messages.nodes,
     ],
   }
 };
}