graphqlguide / guide Goto Github PK
View Code? Open in Web Editor NEW📖 The GraphQL Guide website
Home Page: https://graphql.guide
📖 The GraphQL Guide website
Home Page: https://graphql.guide
Tracking here: apollographql/react-apollo#2202
In Persisting section, branch 25
And email book to Stripe email in addition to GH email
apollographql/apollo-feature-requests#74
for ON_REVIEW_CREATED_SUBSCRIPTION
Made withAuth
to not have to mess with <App>
and give example of making HOC. Not feeling like either reason is very important.
Inspired by DHH's series on writing software well, in an episode recommending judicious use of globals, eg for the current user.
Could be used for login
/logout
functions.
// CurrentUserQuery.js
export let login, logout
class CurrentUserQuery extends Component
constructor() {
login = this.login
logout = this.logout
}
login = () =>
logout = () =>
So that eg in Profile.js
you can:
import { login, logout } from './CurrentUserQuery'
instead of getting them as props.
Need a reactive data source for loading
& currentUser
, so can't do globals.
Could do a withUser()
HOC that provides them through graphql()
to any component that needs it. All using default cache-first, and deduplication should combine them into one query, while also maintaining data.loading
/loadingUser
.
loggingIn
into loading
? In the single-use withAuth
, it's defined as: loading={loading || this.state.loggingIn}
class Profile extends Component {
...
}
export default withUser(Profile)
(or alternatively could make a reusable <WithUser>
query component, but that takes more characters and indentation to use)
A single normal query at the top. Lot of drilling. It's nice for testing, but not nice to read/write. Would personally prefer to avoid.
<CurrentUserQuery>
{({ loading, error, data }) => (
<App loadingUser={loading} currentUser={data.currentUser} />
)}
</CurrentUserQuery>
Waiting on #5
Tracking apollographql/apollo-client#7061
GitbookIO/gitbook#1120 (comment)
related, replaces :emoji_name: with images: https://www.npmjs.com/package/gitbook-plugin-advanced-emoji
import { bool, string } from 'prop-types'
Component.propTypes = {
loading: bool.isRequired,
name: string.isRequired
}
// or current method:
import PropTypes from 'prop-types'
Component.propTypes = {
loading: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired
}
I think it will be gone when we move to v4 of material-ui? Branch <= 27 doesn't use variant
.
https://material-ui.com/style/typography/#migration-to-typography-v2
We say it's best practice to use a single input type as an argument, and then we do this:
type Mutation {
createUser(user: CreateUserInput!, secretKey: String!): User
}
I created it that way because secretKey
felt like something out of band, like you'd put it in a header, except it's more convenient to be an argument given it's only used in this one resolver. Is that a good reason, in which case we could add an explanation, or should we just move it inside the input object like this?
input CreateUserInput {
firstName: String!
lastName: String!
username: String!
email: String!
authId: String!
secretKey: String!
}
Thanks to @Borales for asking
gives no results, and sometimes crashes Preview
When viewedSection
mutation response arrives, an unnecessary SectionContent
query is sent.
Tracking here: graphql/graphql-playground#578
at least the high vulns 😆
spin & thank you/share
Waiting on: apollographql/react-apollo#2324
Branch 8
, after Now we’ve got login working.
export const withUser = graphql(USER_QUERY, {
options: { notifyOnNetworkStatusChange: true },
props: ({ data: { currentUser, loading } }) => ({
user: currentUser,
loggingIn: loading
})
})
My sense is non-graphql people are more familiar with skip & limit vs offset & first? graphql.org, relay, and prisma use the latter
Here: https://github.com/GraphQLGuide/guide/blob/master/src/lib/payment.js#L88
Either full page grayed or in place of "get the beta" inside the button? What does Material Design recommend?
Not sure how precise these should be so happy to "tone it down" if this is not meaningful, however StarCount.js
's polling mechanism should be disabled in 3_0.0.3
onward due to the subscription work put in place.
If you should like this level of detail, is there a decent way of issuing these small changes against their tags (and the rest of the steps too then when relevant)? The workflow as a reader is pretty nice, but curious how as an author what the flow would be to patch all the rest.
feature/betalist
master
When running the project from a fresh clone I receive the following error in the browser:
TypeError: Cannot read property 'section' of undefined
options
src/components/Section.js:51
48 | `
49 |
50 | const withData = graphql(SECTION_QUERY, {
> 51 | options: ({ location: { state: { section: { id } } } }) => ({
52 | variables: { id }
53 | }),
54 | props: ({ data: { section, loading } }) => ({
View compiled
▶ 18 stack frames were collapsed.
./src/index.js
src/index.js:39
36 |
37 | const client = new ApolloClient({ link, cache })
38 |
> 39 | ReactDOM.render(
40 | <BrowserRouter>
41 | <ApolloProvider client={client}>
42 | <App />
git clone [email protected]:GraphQLGuide/guide.git guide-clean
cd guide-clean
git checkout 5_3.0.3
npm install
npm start
I've spent a couple of hours trying to debug it with no luck, and sort of stuck running through the rest of the book that I purchased. Checking out the next chapter at 6_0.0.3
everything works fine again.
All of the GraphQL playground links I've tried in the book redirect to an empty page.
Example: https://www.graphqlbin.com/lOR8i2
Redirects to: https://legacy.graphqlbin.com/new
I have version r2 of the epub.
apollographql/apollo-client#4419 (comment)
Unable to repro:
client.query: https://codesandbox.io/s/oqp4jzjr3q?fontsize=14
graphql(): https://codesandbox.io/s/7k9n5k6l1?fontsize=14
Pending apollographql/react-apollo#2067
branch 9
: this.props.viewedSection
Chapter 6, Section 2 references 3_0.0.3
tag as it's basis for work. Under this section, for the TableOfContents
evolution, there are references to the lib/helpers
for slugify
method. This file however is not included in the source code at this point and is introduced later on in 4_0.0.3
.
Should bring that file into the source tree for 3_0.0.3
to allow users to evolve the app in lock-step with the book.
like this:
https://twitter.com/skidding/status/971716661895024642?s=21
their code is here:
vscode might have a version that checks for existing duplicates first?
would be nice as a npm package
Currently Training is kept in first row on smaller screens as a price anchor. Test if that has any difference compared to traditional increasing-price order.
https://github.com/kumarharsh/graphql-for-vscode
with a refresh-schema
script in package.json
:
Currently all animations but header and first paragraph you don't see on mobile because they're below the fold. Would be nice if the animations were triggered by scrolling.
@hakimelek interested?
after logo is done. https://css-tricks.com/essential-meta-tags-social-media/
Spinner inside the order button? Related: #31
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.