graphqlguide / guide Goto Github PK

gives no results, and sometimes crashes Preview

Things are showing up as too many pixels for the device emulator. And then shrunk by chrome to fit device screen. Something to do with flexbox? Branch bug/pixels

apollographql/apollo-feature-requests#74

for ON_REVIEW_CREATED_SUBSCRIPTION

https://github.com/FormidableLabs/react-progressive-image

and/or

https://jsfiddle.net/idobarnoam/k89ff3ay/1/

apollographql/apollo-cache-persist#23 (comment)

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.

like this:

https://twitter.com/skidding/status/971716661895024642?s=21

their code is here:

https://github.com/skidding/flatris/blob/b9088b80c2d01eb375502903df2a7262b406a5b5/components/pages/Error.js

vscode might have a version that checks for existing duplicates first?

https://github.com/Microsoft/vscode/blob/27adc85a73a9f1784dc4d7bb3f48c3fe41360655/src/vs/code/electron-browser/issue/issueReporterMain.ts

would be nice as a npm package

  typeDefs: `
    type Query {
      loginInProgress: Boolean
    }
    type Mutation {
      setSectionScroll(id: String!, scrollY: Int!): Boolean
    }
  `,

adding

    type Section {
      scrollY
    }

doesn't work:

My sense is non-graphql people are more familiar with skip & limit vs offset & first? graphql.org, relay, and prisma use the latter

When viewedSection mutation response arrives, an unnecessary SectionContent query is sent.

happens when the Select is opened and the scrollbar is removed

https://github.com/kumarharsh/graphql-for-vscode

with a refresh-schema script in package.json:

https://github.com/graphcool/get-graphql-schema

loktar00/react-lazy-load#123

unable to reproduce outside Guide:

https://codesandbox.io/s/vn5q7oq8w3

with http://github.hubspot.com/odometer/docs/welcome/

at least the high vulns 😆

Tracking claudio-silva/gitbook-plugin-prism-ext#1

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

Spinner inside the order button? Related: #31

And email book to Stripe email in addition to GH email

Current bug behavior:

• open graphql.guide in a new tab that doesn't have focus (eg by cmd-clicking a link)
• wait 10s
• switch to the new tab. you'll see an empty page with just:

because the StaggeredMotion animation trigger doesn't wait while the page isn't focused, whereas GSAP TimelineLite does wait.

• create new branch feature/betalist
• whenever you'd like me to take a look at your work, open a PR from that branch to master

Waiting on #5

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

after logo is done. https://css-tricks.com/essential-meta-tags-social-media/

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#6375

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?

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
  })
})

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?

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 />

Steps to Reproduce

1. git clone [email protected]:GraphQLGuide/guide.git guide-clean
2. cd guide-clean
3. git checkout 5_3.0.3
4. npm install
5. npm start
6. Observe error in browser

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.

GitbookIO/gitbook#1120 (comment)

related, replaces :emoji_name: with images: https://www.npmjs.com/package/gitbook-plugin-advanced-emoji

Firefox can't establish a connection to the server at wss://api.graphql.guide/subscriptions.

Thanks @zenweasel for reporting. If anyone else runs into this, let us know your environment and if you have any ideas on what might be causing it ☺️

spin & thank you/share

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

Tracking here: apollographql/react-apollo#2202

In Persisting section, branch 25

Header moved to left side of screen, full screen height. Same animation order. First two:

Current:

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.

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.

Tracking apollographql/apollo-client#7061

Tracking here: graphql/graphql-playground#578

Pending apollographql/react-apollo#2067

branch 9: this.props.viewedSection

auth0/auth0.js#618

Made withAuth to not have to mess with <App> and give example of making HOC. Not feeling like either reason is very important.

Globals?

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.

• Pro: Easy
• Con: Testing—for various forms of testing (including explicit unit tests and things like storybook), you then have to mock out the globals.

// 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.

Prop drilling vs HOC vs Context/unstated

Need a reactive data source for loading & currentUser, so can't do globals.

Reusable query

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.

• Pro: concise. Using Apollo store like the global variable it is
• Con: how to incorporate 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)

Prop drilling

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>

Context/unstated

• Pro: no drilling
• Con: verbose