Example with-graphql-hooks broken request

[tayloraucoin]

Bug report

Describe the bug

Two issues:

Issue 1 - On creating example app, initial load is broken with error. Error serializing .initialGraphQLState["6gftu9"].data returned from getStaticProps in "/". Reason: undefined cannot be serialized as JSON. Please use null or omit this value. This is from the undefined value in the return not being JSON parsable (see https://dev.to/ryyppy/reason-records-nextjs-undefined-and-getstaticprops-5d46). The request during this initial load of the example is returning a 502.

Issue 2 - Broken request to existing api using code in example. When utilizing the logic in the example into an existing minimal next.js boilerplate, 400 bad request is continually returned throughout troubleshooting attempts.

error: {
    httpError: {
      status: 400,
      statusText: 'Bad Request',
      body: '{"errors":[{"message":"body.charCodeAt is not a function"}]}'
    }
  }

The api url is an existing app api that I can confirm the function in graphiql. Testing query is a minimal test example that is proven valid in the graphiql.

Here are the request inputs:

query {
  kind: 'Document',
  definitions: [
    {
      kind: 'OperationDefinition',
      operation: 'query',
      name: [Object],
      variableDefinitions: [Array],
      directives: [],
      selectionSet: [Object]
    }
  ],
  loc: { start: 0, end: 128 }
}
operation {
  query: {
    kind: 'Document',
    definitions: [ [Object] ],
    loc: { start: 0, end: 128 }
  },
  variables: { count: 5 },
  operationName: undefined,
  persisted: undefined
}
opts { useCache: true, variables: { count: 5 } }

Here is the query (if it helps):

import gql from "graphql-tag";

export default gql`
  query getCreators($count: Int) {
    creators(first: $count) {
      nodes {
        name
      }
      totalCount
    }
  }
`;

All of the files used are as they are in the example repo.

When watching my api logs, no requests are hitting the api

To Reproduce

Issue 1 - Broken initial code in example

1. npx create-next-app --example with-graphql-hooks with-graphql-hooks-app
2. npm i
3. npm run dev
4. view localhost:3000 to see error

Issue 2 - Broken request to existing api using code in example

1. npx create-next-app --example with-graphql-hooks with-graphql-hooks-app
2. npm i
3. change url in graphql-client.js to existing api of your choice
4. add query of your choice for api
5. npm run dev
6. view localhost:3000 to see error

Expected behavior

1. Expect example to return valid values and render example ui

2. Expect data to be present in api return for valid queries

System information

• OS: macOS Mojave 10.14.4
• Chrome 87.0.4280.88
• Next.js: 10.0.0
• Node.js: 12.14.0

Merry Christmas! 🎅

[tarunama]

@tayloraucoin

Issue 1 - On creating example app, initial load is broken with error

This issue was maybe solved by changing request URL.
Response's HTTP status code 502, we need permission to fix this issue, Or use testing API.

[ludofischer]

If anyone still needs this, they can check my branch #20929. It works at least with the same example API as the Apollo example. I think the upvoting feature feels sluggish could do with some optimistic updates that the graphql-hooks does not provide by default, but as the original example did not implement it I did not either.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.