Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add query key function #97

Merged
merged 1 commit into from
Apr 30, 2024
Merged

Conversation

seriouslag
Copy link
Collaborator

@seriouslag seriouslag commented Apr 29, 2024

This PR is to make it easier for consumers to invalidate queries.

This is achieved by exporting a new function that builds the query keys.
This function is used internally to build the queryKey for the hooks.

The new functions are the name of the queryHook + 'Key' + 'Fn' and the first letter is capitalized.

We capitalize the first letter because the lowercase 'use' is reserved for hooks and all our queryHook start with use.

// example
import {
  usePetServiceFindPetsByStatus,
  usePetServiceAddPet,
  UsePetServiceFindPetsByStatusKeyFn,
} from "../openapi/queries";
import React from 'react';

// App.tsx
function App() {
  const [status, setStatus] = React.useState('available');
  const { data } = usePetServiceFindPetsByStatus({ status });
  const { mutate } = usePetServiceAddPet({
    onSuccess: () => {
      queryClient.invalidateQueries({
        // Call the query key function to get the query key
        // this is important to ensure the query key is created the same way as the query hook,
        // this insures the cache is invalidated correctly.
        queryKey: [UsePetServiceFindPetsByStatusKeyFn({
          status,
        })],
      });
    },
  });

  return (
    <div className="App">
      <h1>Pet List</h1>
      <ul>{data?.map((pet) => <li key={pet.id}>{pet.name}</li>)}</ul>
      <button
        onClick={() => {
          mutate({ name: "Fluffy", status: "available" });
        }}
      >
        Add Pet
      </button>
    </div>
  );
}

export default App;

@seriouslag seriouslag requested a review from 7nohe April 29, 2024 22:06
Copy link

github-actions bot commented Apr 29, 2024

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 99.07% (🎯 95%) 1821 / 1838
🟢 Statements 99.07% (🎯 95%) 1821 / 1838
🟢 Functions 100% (🎯 95%) 40 / 40
🟢 Branches 94.51% (🎯 85%) 155 / 164
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
src/common.mts 100% 100% 100% 100%
src/createExports.mts 100% 100% 100% 100%
src/createUseQuery.mts 99.81% 97.43% 100% 99.81% 543
Generated in workflow #248

@seriouslag seriouslag added the enhancement New feature or request label Apr 29, 2024
@seriouslag seriouslag self-assigned this Apr 29, 2024
@seriouslag
Copy link
Collaborator Author

npm publish

Copy link
Owner

@7nohe 7nohe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good work

@seriouslag seriouslag force-pushed the feature/add-query-key-function branch from 5c5be96 to e7b9457 Compare April 30, 2024 23:13
@seriouslag seriouslag merged commit 49aab1f into main Apr 30, 2024
4 checks passed
@seriouslag
Copy link
Collaborator Author

@7nohe merged, mind releasing a new version?

@7nohe 7nohe deleted the feature/add-query-key-function branch April 30, 2024 23:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants