Some housekeeping:

• Test naming consistency
• Merge duplicate describe blocks in tests

Followed by:

• Add tests for refetch from a refetch (fixed #52)

Which resulted in finding and fixing:

• Refetch from a refetch doesn't trigger rerender (fixed #51)

useMemo should not be used for side effects.

In strict mode during development on React 17, function component bodies and functions passed to useState, useMemo, or useReducer are invoked twice.

Invocations of a functional component happen before any useEffect within it is resolved. Note that in the following code in React 18, in strict mode, "render" will be logged twice first and then "effect" will be logged twice:

import { useEffect } from "react";

export default function App() {
  console.log("render");
  useEffect(() => console.log("effect"));
  return null;
}

https://codesandbox.io/s/use-effect-order-strict-mode-6v00ys?file=/src/App.js:0-152

(note that in React 17, the console is muted on one of the invocations, which caused me a lot of pain during debugging - this isn't the case in React 18).

In React 18, functions passed to useEffect are also called twice. I'm not sure if this is dev mode only.

These are all intentional in order to detect issues e.g. with async react and upcoming features such as preserving state between unmounts.

We need to set loading=true within the hook depending on whether fetch is going to be called, and then return this value from the hook.

Perhaps we need to call fetch with useSyncExternalStore (via the separate module for React 17 compatibility) although as we're not caching responses, I don't think we would have an external store, so perhaps this isn't relevant.

...or the upcoming useEvent if/when it makes it in to React.

Fixes some strict mode issues during development due to double invoking useMemo

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

https://reactjs.org/docs/hooks-reference.html#usememo

Fixes #47

Massive thanks to @dai-shi for explaining a few details helping with the final piece of the puzzle (dealing with double invocation of useEffect with a ref)

https://discord.com/channels/627656437971288081/905738792164556800/977210103847596043

~@testing-library/react-hooks isn't testing that hooks auto rerender when data change~ (edit:#33), ~nor is it ensuring our types make sense in real world use~ (edit: #34 ).

=> Add some Cypress tests with realistic usage examples

Alternatives

If you want to fetch data in a hook but don't care about the apollo-client API:

• react-hooks-fetch
• react-query

If you can use something lower-level:

• Lean on your router to fetch data for you, e.g. Remix's loader and the React Router equivalent (currently in beta)
• react-suspense-fetch

When calling refetch, you can assign it to a variable:

const refetchResponse = hookValue.refetch()

This variable allows you to refetch again from the variable rather than from the hook response:

refetchResponse.refetch()

However, calling refetch in this way does not cause the UI to rerender with a loading state.

At the moment we only output an ESM build. This is mostly fine with modern tooling but Jest will error and want a CommonJS build.

https://jestjs.io/docs/ecmascript-modules

https://github.com/penx/use-async-query/blob/a5c91b7cc19e518d2a9d838491001f6fcf1fc616/use-query.ts#L116-L118

Perhaps we need to return an error response at this point?

At the moment, this:

export const sendEmail = ({email}: {email: string}) => emailServer.send(email, 'hi');

const useSendEmail = () => useLazyQuery(sendEmail);

Has a type error:

Argument of type '({ email }: { email: string; }) => Promise<void>' is not assignable to parameter of type '() => Promise<void>'.ts(2345)

Perhaps unrelated but worth exploring, this:

const useSendEmail = (email: string) =>
  useLazyQuery(sendEmail, {
    variables: {
      email,
    },
  });

...I think suffers from not being memoized on every call

1. Apply types to Jest mocks. Jest mocks were previously typed to accept and return any, so appropriate type errors were not being thrown
2. Reinstate overloads to resolve type issues

We shouldn't need to call renderHookResult.rerender to get the result from the refetch - the hook should auto update and testing library should update itself.

As per @tkdodo advice at

https://twitter.com/tkdodo/status/1577709398314590213

Look in to using useSyncExternalSource instead of writing to refs and forcing updates

• add a client context provider
• if context exists when calling hook, pass its value as a client option to the query function
• if client is specified in options, it overrides anything in context

Useful if client comes from React context, but you want to define your queries as standalone functions

https://www.apollographql.com/docs/react/data/queries/#client