the-road-to-graphql / react-apollo-link-state-example

A React application using Apollo Client with apollo-link-state for local state management.

react-apollo-link-state-example

A React application using Apollo Client with apollo-link-state for local state management. While apollo-link-state (as alternative to React's local state, Redux or MobX) is used to manage selected items in a list as local data, the remaining queries and mutations are used for remote data.

Installation

• git clone [email protected]:the-road-to-graphql/react-apollo-link-state-example.git
• cd react-apollo-link-state-example
• npm install
• add your own REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN in .env file
  • scopes/permissions you need to check: admin:org, repo, user, notifications
• npm start
• visit http://localhost:3000

Want to learn more about React + GraphQL + Apollo?

• Don't miss upcoming Tutorials and Courses
• Check out current React Courses

react-apollo-link-state-example's Issues

Link to web post about this is broken

We are sorry - this page is not here anymore
Error 404 - Page not found

Separate resolvers ( query, mutation ) logic into separate files

How can I separate client side resolvers into multiple separate files and later import them in client file ?

e.g in below code all resolvers are written in a single file, for large projects it will be good idea to separate them into multiple contextual files.

const toggleSelectRepository = (_, { id, isSelected }, { cache }) => {
  let { selectedRepositoryIds } = cache.readQuery({
    query: GET_SELECTED_REPOSITORIES,
  });

  selectedRepositoryIds = isSelected
    ? selectedRepositoryIds.filter(itemId => itemId !== id)
    : selectedRepositoryIds.concat(id);

  cache.writeQuery({
    query: GET_SELECTED_REPOSITORIES,
    data: { selectedRepositoryIds },
  });

  return { id, isSelected: !isSelected };
};

const stateLink = withClientState({
  cache,
  defaults: initialState,
  resolvers: {
    Mutation: {
      toggleSelectRepository,
    },
  },
});

I need help in organising my project structure in scalable and maintainable way.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Apollo-link-state is already included in Apollo Boost.

Based on info from here:
https://www.apollographql.com/docs/react/essentials/local-state.html#setup
I think it might be easier to use one package instead of few.
Please correct me if I am missing something.