How to use ApolloClient in Selector

Thanks for providing the great library.

I try to load asynchronos data as described in the example with an Apollo GraphQl client. This works:

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: 'http://localhost:1337/graphql',
    })
  });

const currentPatientsQuery = selector({
    key: 'Patients',
    get: async ({get}) => {
        const response = await client.query ({
            query: PATIENTS,
            fetchPolicy: "network-only",
        });
      return response.data.patients;
    },
  });

Now I want to use the client I had created in my App.tsx. Normaly I would use: const client = useApolloClient();

But this is not working.

Is it possible to use other react hooks together with recoil ?

Thanks for your help.

[drarmstr]

The recoil-relay library is also now available for working with GraphQL and Recoil. This uses Relay instead of Apollo, but does allow for easy syncing of GraphQL queries with Recoil.

[mondaychen]

@dcantu96 Like you and @zbyte64 said, we should always use hooks inside a component. It might work when you use them otherwise, but can break in some edge cases or future releases, depending on how exactly it’s implemented.

We don’t have an easy way to make it work appropriately at the moment. But we’ve been working on a sister library called “recoil-sync” to address this issue, with which you can sync a piece of external data to an atom. Our current plan is to release it in March, but you can preview the doc here. We appreciate feedbacks on the design, docs and source code. I’ll also ping the thread once it’s released. Thanks for the support!