I'm creating an apollo react application. I want apollo to manage my local state. I want to structure my local state so not all scalar values are at the top level.
This is my configuration:
import React from 'react'
import ReactDOM from 'react-dom'
import ApolloClient from 'apollo-boost'
import gql from 'graphql-tag'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider, Query } from 'react-apollo'
const defaults = {
author: null
}
const resolvers = {
Query: {
author() {
return { id: 1 }
}
}
}
const typedefs = gql(`
type Query {
author: Author
}
type Author {
id: Int
}
`)
const apolloClient = new ApolloClient({
clientState: {
defaults,
resolvers,
typedefs
},
cache: new InMemoryCache()
});
ReactDOM.render(
<ApolloProvider client={ apolloClient }>
<Query query={ gql`{ author @client }` }>
{ ({ data }) => console.log(data.author) || null }
</Query>
</ApolloProvider>,
document.getElementById('app')
)
Then this app logs undefined
. I.e., the query { author @client { id }}
returns undefined
in data.author.
It must be noted that when I set the type of author as Int, default value as 1
, and I do the query { author @client }
, the app correctly logs 1
.
How can I have some structure in my local state with Apollo?
These are my relevant dependencies:
apollo-cache "^1.1.20"
apollo-cache-inmemory "^1.3.8"
apollo-client "^2.4.5"
apollo-link "^1.0.6"
apollo-link-error "^1.0.3"
apollo-link-http "^1.3.1"
apollo-link-state "^0.4.0"
graphql-tag "^2.4.2"
Solved:
Apparently I had to add
__typename: 'Author'
to the defaults author this way: